0. 라우팅과 정적/동적 라우팅
라우팅은 간단하게 말해서 페이지를 이동시키는 것을 말한다. 엄밀히는 라우터가 객체 타입이다. 이 객체를 사용해서 다른 페이지로 이동하고 싶을 때 '라우팅'한다고 말할 수 있다.
페이지가 넘어갈 때 정해진 페이지가 있는 경우(예: 게시글 목록에서 등록 버튼을 누르면 게시글 등록 페이지로 이동) 정적 라우팅한다고 얘기하고
반대로 동적 라우팅은 게시글 목록에서 특정 게시글을 확인하고 싶을 때 글 번호에 따라 주소와 페이지가 바뀌는 것을 예로 들 수 있다. 이 때 글을 볼 때마다 주소에 '/글 번호'가 더 붙어서 페이지로 이동하게 된다.
1. 라우팅 사용법
들어가기 전: 코드는 Next.js 기준입니다. React.js나 React.Native는 라우터 사용법이 다릅니다!
먼저 라우팅이 필요한 페이지 파일에 useRouter를 불러오고 선언한다.
import { useRouter } from "next/router";
const router=useRouter();이 라우터 객체를 이용해서 원하는 페이지로 이동하거나 뒤로가기, 새로고침, 현재 위치 주소 반환, 현재 페이지 삭제 후 이동 등의 다양한 기능을 수행할 수 있다.
기능(메소드)를 간단하게 나열해보면,
router.query
router.push
router.back
router.reload
router.replace
router.pathname
정도가 있고 제일 기본인 push의 경우 원하는 페이지로 이동할 수 있는데, 다음과 같이 사용한다.
router.push(이동할 페이지 경로);Next.js의 경우 동적 라우팅은 여러 폴더를 만들 필요 없이 대괄호[] 안에 변수이름을 만들어서 하나의 폴더만 생성하면 끝난다.
예를 들면 게시글 번호 마다 동적 라우팅을 하고 싶을 때
/board/[num] 으로 폴더를 만들고 useQuery 등으로 api 요청을 보낼 때는 router.query.num 과 같이 접근한다.
