React-Routing

라우터 객체와 라우팅

라우터 객체: 페이지 이동과 관련된 기능을 가지고 있는 객체

정적라우팅과 동적라우팅

정적라우팅

- 예를들어 /singup 페이지는 누가 언제 접속해도 항상 회원가입 페이지가 나옵니다.

이러한 페이지로 이동하는 것을 "정적 라우팅한다"고 합니다.

 

동적 라우팅

- 반면, 게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경됩니다.

이런 경우에는 게시글이 100개, 1000개가 넘어가게 되면 각각의 글 번호에 따라 페이지를 100개, 1000개씩 만들어 정적 라우팅을 해주기는 어렵기 때문에 이러한 라우팅을 효과적으로 처리하기 위해서 "동적 라우팅"을 사용합니다.

동적라우팅 예시

next.js에서는 동적 라우팅을 제공해주는데요.

위의 폴더 구조와 같이 보여주고자 하는 폴더 이름의 하위 폴더로 [boardId] 폴더를 만들어 준 후 이 대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 페이지 번호, 혹은 게시글 번호가 대괄호 안에 쓰려진 변수명에 담겨져 그 변수 안에 있는 데이터를 꺼내 조회할 수 있습니다.