useRouter, 동적라우팅

그냥 리액트만 사용할 때 나는 ... 페이지 이동을 위해서 많은 명령어를 사용했어야 했다. 하지만 넥스트라이브러리를 사용하니, 이렇게 세상 편하게 이동을 할 수가 없어!

라우터는 이름에서 알 수 있듯이 페이지 이동을 위해 사용한다.
길을 만들어 주는 것 기존의 리액트 라우터와 기능은 같은데 훨씬 편하게 사용할 수 있다.
일단 내 포스팅은 넥스트 라이브러리를 쓴다는 전제가 깔려있다.

import { useRouter } from "next/router";
 const router = useRouter();
 const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query.boardId },
  });

 function onClickMoveToEdit() {
    router.push(`/boards/${router.query.boardId}/edit`)
  }

너어무 간단한 사용법
1. 위에서 보듯이 넥스트 라이브러리를 설치하고 라우터를 불러온다
2. 라우터를 정의한다.
3. 사용한다. (위 코드에서는 클릭하면 수정하기로 이동하는 함수에서 어디로 이동해야할 지 그 수정하는 페이지 라우터의 주소로 쓰였다.)

라우터를 사용하면 동적 라우팅이 가능해진다.
동적 라우팅이란? 바로 페이지를 하나하나 일일히 적어주지 않아도 지가 알아서 페이지를 할당해가며 보여주는 것이다. (정말 굉장한 기능 아니냐!!!!)

어떻게 그것이 가능한지를 보자.

위는 클릭하면 제출해주는 함수이다. 이 함수는 각각의 항목에 무언가 적혀있으면 제출하기 버튼을 눌렀을 때 createBoard라는 mutation요청을 해주고, 서버로부터 전달받은 게시글의 _id정보를 result.data.createBoard._id로 조회하여 동적라우터 폴더에 할당하는 코드이다. 디렉토리명을 []대괄호로 감싸고 그 안에 어떤 변수명을 넣어주면 동적라우팅 폴더가 된다. 이때 최초로 할당된 id값은 동적라우팅 폴더명으로 router.query.폴더명 으로 조회가 가능하다. 나는 그 폴더명을 [id]라고 했으므로 추후에 같은 폴더를 조회해야 할 때는, 아래와같이 사용할 수 있다.

콘솔로그를 찍어보면 객체안의 객체안의 객체에 _id정보가 들어있다. 이것은 쿼리문에 리턴값으로 내가 요청했기 때문임

정적라우팅은 우리가 일반적으로 사용하는 그 방식이다. 이미 있는 이름을 넣어주면 그리로 가는 것. 동적라우팅은 이름도 없는데, 그 폴더 안에서 이름을 생성하여 알아서 들어가는 것이 동적라우팅이다.
대괄호 변수명의 폴더안에는 index.js파일 하나뿐이지만, 그 폴더안에서 전달되는 데이터에 따라 수백 수천가지의 게시글 페이지가 탄생하게 된다. 라이브러리의 강력한 힘을 체험할 수가 있다.