shallow-Routing
shallow-Roting은 Next.js에서 제공하는 기능이다.
나는 여태 라우터는 router.push, router.query 정도만 사용 했는데
shallow-routing이란 것이 있길래 포스팅과 동시에 배워보려고 한다.
shallow-routing이란??
shallow-routing(이하 얕은라우팅)은 무엇일까?
만약 router.push를 한다면 query내용이 변경되고 다시 렌더링 되며 해당 url로 이동하게 된다.
하지만 얕은라우팅을 사용하면 url내용만 변경되고 렌더링이 되지않는다.
즉 우리가 다이나믹 라우팅으로 아이디값을 다른페이지에 주고 아이디를 받은페이지에서
해당 데이터를 가공해야 한다면 얕은 라우팅을 사용하면 되는것이다!
어떻게 쓰나요?
const onClickMoveToList =() => {
const hello = "hello"
router.push(hello , {shallow:true})
}
[router.query.hello]
위 처럼 사용하면 라우터 내용은 변경되지만 컴포넌트가 리렌더링 되지는 않는다.
