next/router - useRouter(1)

useRouter는 Next.js에서 제공하는 내장되어 있는 hook이다. react를 사용할 때는 react-router를 설치해야하며 클릭할시 페이지를 이동하기 위해 useParams를 따로 지정해줘야하는 번거로움등 여러가지로 처음 개인프로젝트를 할 때 힘들었던 부분이었던 것 같다. Next.js에서는 따로 라이브러리를 설치할 필요없이 내장되어있는 useRouter hook을 사용하여 이러한 과정들을 상대적으로 훨씬 수월하게 가능하다.

useRouter 이용한 페이지를 만드는 과정

일단 Next.js는 파일명 자체가 url값으로 들어가기 때문에 파일명을 주소에 입력하면 해당 페이지가 나오게 된다.

export default function About() {
    return (
      <>
        <Seo title="Home"/>
        <h1>about</h1>
      </>
    )        
}

이런점 하나하나가 react와 비교가 되는 것 같다.

대부분 페이지를 이동할 때는 데이터의 id값을 통해서 페이지로 이동하는 경우가 많다. URL에는 변수가 필요하다

변수를 넣는 방법은 비교적 간단하다. 파일명을 입력할 때 []대괄호 안에 변수이름을 넣어주기만 하면 된다.

그다음 페이지가 잘 나오는지 확인해보자 변수명은 1로 주었다. 변수값은 어떤값을 넣어도 상관없다.

import { useRouter } from "next/router";

export default function Detail() {
  const router = useRouter();
  console.log(router);
  return "detail";
}

잘 나오고 있다.

그 다음 useRouter를 사용하기전

콘솔에 router가 어떻게 찍혔는지 확인해보면

query값에 id값(이것(id라는 변수명)은 내가 지정한 변수명과 같다 [id].tsx)이 1로 찍히는 것을 볼수 있다.