Next.js 12 - Dynamic Routes

Next.js

 

⚫ Dynamic Routes

---

- create-react-app에서 react-router-dom을 사용할 때는 "/movies/:id: 이런 식으로 사용했었다.

  Next.js에는 다른 방법이 있다.(Next.js에는 router가 없기 때문)

 

- router를 설정하거나 그런 거 없이 폴더랑 파일의 이름만으로 route를 구성한다.

  파일 이름을 [id].js 이런 식으로 대괄호 안에 route에서 사용될 변수명을 넣어주면 된다.

 

- 해당 변수명은 useRouter()의 query 안에 들어있다.

  대괄호 안에 ...을 추가하여 모든 경로를 포착하도록 Dynamic Routes를 확장할 수 있다.

  page/movies/[...id].js는 /movies/1과 일치하지만, /movies/1/2/3, /movies/1/ab/cd 등과도 일치한다.

 

- router가 두 번 console.log 되는 이유?

  처음에는 react.js가 로딩되지 않았을 때의 페이지를 렌더링 하는데, 이 때 router.query는 {} 빈 객체이다.

  react.js가 로드 되어서 query값이 업데이트 되면 react.js가 상태 변화를 감지하고,재렌더링한다.

 

  이 때문에 console.log가 2번 실행되는 것이다.(router.isReady를 체크하면 한 번만 console.log 할 수 있다)