Static, Dynamic Routing (정적 라우팅, 동적 라우팅)

Static, Dynamic Routing

 

 

Routing 이란?

 

• 목적지까지 갈 수 있는 여러 경로 중 한가지 경로를 설정해주는 과정을 의미
• 라우터 객체를 이용해 페이지를 이동하는 것
  └ 라우터 객체 : 페이지 이동과 연관된 객체
• 라우팅의 종류에는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)이 있음

 

const router = useRouter();

view raw example.js hosted with ❤ by GitHub

• React에서 router를 사용하기 위해서는 위와 같이 useRouter를 사용해야 함
• 이는 react-hooks 기능을 사용한다는 뜻

 

 

 

Router 객체의 종류

 

• router.push("이동할 페이지") : 지정 페이지로 이동
• router.replace("이동할 페이지") : 지정 페이지로 이동하되, 현재 페이지 기록을 저장하지않음
• router.back() : 이전 페이지로 이동(뒤로가기)
• router.reload() : 페이지 새로고침

 

※ 이외의 객체는 NextJS 페이지에서 확인할 수 있음

 

 

 

정적 라우팅

 

• 항상 일정한 페이지로 이동
• 라우팅할 페이지를 하나하나 설정해주어야 함
• 로그인 페이지와 같은 것을 만들 때 사용

 

 

└ pages 폴더에 example 페이지 생성

 

 

└ 정적 라우팅을 이용하여 pages 폴더에 만들어진 파일의 이름으로 경로를 설정하였음

 

 

 

동적 라우팅

 

• 판매글이나 자유게시판처럼 주소가 계속해서 만들어지게 되는 경우 동적 라우팅을 사용
• 변수를 설정하고 그 변수에 원하는 정보를 할당하게하게되면
  정적 라우팅처럼 일일이 페이지를 만들어 줄 필요가 없음
• 보여줄 페이지 폴더의 하위폴더를 만드는데 폴더명을 []로 감싸줌
  ex) [boardId]
  예시처럼 해주게 되면 자동으로 게시글 ID를 받아와 해당 페이지로 이동하게 됨

 

 

└ 동적 라우팅을 위하여 [anything].jsx 생성

 

 

└ 자동으로 게시글의 number를 받아와 페이지 경로로 설정함