라우팅에 대해 한번 이야기 해보려고 한다.
맨 처음 라우팅을 접한 것은 리액트 강의를 보며 접했다.
그냥 html에서 a 태그를 쓰면 될 것 같은데 왜 굳이 라우팅이라는 것을 사용할까?
html에서 a태그를 사용하면 새로고침을 하며 페이지가 이동이 되지만 라우팅을 사용하면 새로고침 없이 페이지 전환이 가능하다.
이밖에 여러가지 내용이 있지만 이 부분이 "아 이래서 라우팅을 써야되는 거구나" 라고 깨달은 계기다.
그럼 오늘은 라우팅 중에서도 정적 라우팅과 동적 라우팅에 대해서 살펴보도록 하겠다.
정적 라우팅 - 라우팅 테이블에 경로를 수동으로 추가해야하는 프로세스
정적라우팅을 Next.js에서 적용을 하면 pages폴더에 만들어진 파일의 이름으로 경로를 아주 쉽게 설정할 수가 있다.
위 예시를 보면 boardWrite폴더는 pages 폴더에 boards폴더에 위치한다.
경로를 보면 pages폴더를 '/'기준으로 하는데
/boards/boardWrite 로 경로가 정해진다.
동적 라우팅
동적라우팅은 next.js를 사용해보며 처음 써보게 되었는데 정말 대단했다.
코딩을 할때 "게시판 상세페이지, 상품 상세페이지 등, 수백,수천가지의 페이지가 있으면 어떻게 코딩을 할까?
조건문으로 내용만 바꿔주는건가" 여러 생각을 해보았는데 여기에 답이 있었다.
동적라우팅의 설정은 위 예시와 같이 '[]'를 사용해 설정한다.
next.js/router 에는 'useRouter'라는 라이브러리가 존재하는데 저렇게 '[]'로 만든 폴더에 이름이
router.query.[폴더명] 이 query의 값으로 적용이 된다.
이와 같이 적용이 된다.
동적 라우팅의 경로를 보게 되면
pages폴더 안에 boards폴더 안에 [id] 폴더가 존재한다.
즉 /boards/router.query의 값을 통해 한개의 파일로 여러 페이지를 보여줄 수 있는 것이다.
꼭 한번씩 사용해보길 바란다. 아디오스!
