Shallow Routing

리액트와 같은 싱글 페이지 어플리케이션은 전체 페이지를 업로드 후 특정 부분을 돌아다니며 보여주는 개념이다. 이때 새로고침 화면도 바뀌지만, 주소도 바뀌어야 사용자가 덜 헷갈릴 수 있다. 이를 돕는 게 shallow routing이다. 리액트의 프레임워크격인 Next.js에서 useRouter로 해당 기능을 지원한다. 

 

 

import { useRouter } from "next/router";

export default function RouterPage(){
const onClickToPage = () => {
	router.push(url, as, option)
}

return(
	<button onClick={onClickToPage}>안녕하세요</button>
)}

안녕하세요 버튼을 누르면 특정 페이지로 이동하게 한 코드다. 여기서 onClickToPage를 router.push로 페이지를 이동시키게 되는데, shallow Routing을 할 수 있는 기능이다. push 파라미터로는 이동할 url, 브라우저 주소에 표시할 이름인 as, shallow 속성을 갖는 option이 있다. as는 옵션 사항으로 입력하지 않으면 앞서 기입한 url을 기준삼는다. option 값으로 shallow를 줄 경우 shallow routing 기능이 활성화된다. 

const onClickToPage = () => {
	router.push("/board", undefined, {shallow : true})
}

shallow routing은 위와 같이 쓴다. 이렇게 쓸 경우 fetch 메서드인 getStaticProps, getSeverSideProps, getInitialProps 등을 쓰지 않고도 현재 주소를 유지할 수 있다. 즉, 특정페이지로 이동 후 state가 업데이트 되어 리렌더링이 되더라도, 현재 이동된 페이지 url을 계속 유지할 수 있다는 말이다.

 

마무리

싱글페이지애플리케이션은 참 신기한 점이 많다. 화면을 깜빡이게 하는 새로고침이 싫어 나왔다는 점, 이를 위해 모든 파일을 한 번에 다 불러왔다는 점, 그로인해 발생한 여러가지 부작용을 잡아둔 여러 기능이 포함되었다는 점 모두. jsx에서도 a태그를 쓸 수 있지만 새로고침이 없는 싱글페이지애플리케이션 특성상 사용하지 않는다. 사용하더라도 새로고침을 막는 함수를 쓰거나, next에서는 Link 기능 안에 한정적으로 사용한다. 새로고침 시킬 바엔 조금 더 귀찮더라도 좋게 보이는 게 좋다는 모두의 선택이라는 소리니까 신기할 따름이다. 약간 완벽을 추구하기에 과정은 어떠하든 중요치 않다는 것을 알려주는 기능 같다.

 

[NEXT.JS] Shallow Routing

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)