뤼른과 nextJS useRouter 로 밀당하기.

nextJS 13을 써보기 위해 이것저것 만들어 보던중 useRouter 라는 메서드를 사용할때, 이떄부터가 문제의 시작이였다.

 

vscode 의 자동완성 기능으로 next/router 로 import 되길래 그런가보구나 하고 넘어갔는데

 

자꾸만 뜨는 이상한 오류,,, 모듈을 mount 하지 못한다...? 왜..? 

 

여기서 부터가 시작이였다..

 

 

내가 잘못 사용했나 싶어 예시 코드를 보았지만 겨우 콘솔 한번 직어보는건데 이런 에러가 난다고? 라는 생각이 들었다.

 

바로 nextJS 공식 문서확인

'use client';
 
import { useRouter } from 'next/navigation';
 
export default function Page() {
  const router = useRouter();
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  );
}

 

공식 문서에서는 next/navigate 에서 import 해오는 것을 알 수 있다. 

 

자동 완성이 내 30분을 날려버린 좋은 경험... 다시는 낚이지 않으리라...

 

한가지 더 재미있던 점은 뤼튼이라는 gpt 를 사용해 보고 있는데 뤼튼에게 질문을 해봣다.

 

``` 

Q : useRouter 는 next/navigate에서 import 하는거야, next/router 에서 import 하는거야?

gpt : 이전에 제가 말씀드린 useRouter 메소드는 @next/router 패키지에서 제공하는 useRouter 메소드입니다. 실제로 코드에서 useRouter 메소드를 사용할 때에도 import { useRouter } from "@next/router"와 같이 @next/router 패키지를 import 합니다. 반면, next/navigate는 라우팅과 관련된 유틸리티 메소드입니다. next.js 버전 9.4.0부터 추가되었으며, 브라우저와 같은 환경에서 페이지를 전환하기위한 next/router의 래퍼 역할을 합니다. next/navigate 패키지를 사용하여 클라이언트 측으로 네비게이션을 수행할 수 있습니다.따라서, useRouter 메소드는 @next/router, next/navigate는 next/dist/client/router 패키지의 사용을 전제합니다. 참고 부탁드립니다.

 

Q: https://nextjs.org/docs/app/api-reference/functions/use-router 해당 문서는 nextjs 공식문서인데, useRouter 는 next/navigate 로 되어있어. 너가 잘못 알고 있는거 아니야?

Functions: useRouter | Next.js

gpt : 저의 답변에서 `NextRouter` 대신 `next/router` 모듈이 올바른 것이 아니었습니다. 죄송합니다. `useRouter` 훅은 `next/router` 모듈로부터 제공되며, `next/router` 모듈을 통해 클라이언트 측에서 URL 경로를 조작하고, 브라우저의 history stack을 조작하는 등의 작업을 수행할 수 있습니다. 따라서 `useRouter` 훅을 사용하여 페이지 전환 등의 작업을 수행하려면, `next/router` 모듈에 포함된 `push`, `replace`, `back` 메소드 등을 사용하면 됩니다. `next/router` 모듈의 메소드를 사용할 때는, 사용하고자 하는 메소드를 import 후 바로 사용할 수 있습니다. 올바른 코드는 다음과 같습니다. ```js import { useRouter } from 'next/router'; import { useEffect } from 'react'; function MyComponent() { const router = useRouter(); useEffect(() => { try { console.log(router); } catch (err) { console.log(err); } }, [router]); //... function handleClick() { router.push('/about'); } return ( <div> <button onClick={handleClick}>Go to About</button> </div> ) } ``` 위 코드를 실행하면, 페이지에서 `Go to About` 버튼을 클릭했을 때, `/about` 경로로 페이지가 전환되면서 브라우저의 주소창도 업데이트됩니다.

 

네녀석 덕분에 30분은 더 허비했다. 그래도 좋은 대화였다 뤼튼,,, 

 

재미있는 일이 있길래,, 근황겸 겸사겸사 글 쓴다. 

 

혹시 잘못된 내용 있으면 댓글 부탁드립니다:)