[코드캠프]FE 6기 1주차(동적/정적 라우팅)

민범기·2022년 3월 18일
0
post-thumbnail

[파일 시스템 기반 라우팅]

Next.js는 파일 시스템 기반 라우팅을 지원한다.
즉 폴더 단위로 되어있는 파일을 라우팅이 가능하도록 지원 한다는 것이다.
React에선 react-router-dom을 별도로 설치해서 router 기능을 사용했어야 했지만,Next.js는 알아서 지원을 해주기 때문에 매우 편한것 같다.

[정적 라우팅]

정적 라우팅은 말 그대로 정적으로 페이지를 이동할 수 있다.


사용법 또한 매우 간단하다. useRouter를 임포트 한 후 Router를 사용 한다.
정적으로 페이지를 이동하기 위해서는 Rotuer.push("이동할 페이지 위치")를 사용한다.

[동적 라우팅]

pages 폴더에 .js 파일을 만들어주는데 여기서 이름에 대괄호([])를 써주는 것이 특징이다.
이름에 대괄호를 사용해줌으로써 이 페이지는 동적으로 라우팅이 된다는 것을 인식하게 된다. 여기서 페이지의 이름은 임의로 설정해줘도 무관하다.


사실 이렇게 따지고 보면 정적 라우팅과 동적 라우팅의 차이는 대괄호인가? 라는 생각이 들 수 밖에 없다.
하지만 확실히 다른 점이 있다. 동적 라우팅에 대괄호로 지정된 임의의 이름은 라우터 객체의 query 속성으로 들어가게 된다.

따라서 동적 라우팅을 적절하게 사용 할 수 있는방법은 동일한 컴포넌트를 여러개 보여줄때 사용할수 있다. 게시물을 조회 할때, 여러개의 게시물을 정적으로 일일히 컴포넌트를 생성하여 보여주기엔 엄청난 시간이 들것이다. 동적으로 하나의 컴포넌트에서 query에 따라 요청하는 url를 각기 다르게 설정하여 하나의 컴포넌트에서 여러가지의 데이터를 보여줄수 있다는 점이 큰 장점인것 같다.
적절한 동적 라우팅과 정적 라우팅의 사용으로 조금 라우팅을 하는 데 있어서 신중하게 생각해 보는것도 좋은것 같다.

profile
프론트엔드 개발 지망생 민범기입니다^^

0개의 댓글