2024.3.13 기록 (NextJS에서 useRouter를 사용해보자)

2. Router와 useRouter의 차이

nextjs에서는 next/router라는 자체 패키지에 둘 모두를 제공

Router는 항상 최신 상태를 가지고 useRouter는 리액트의 라이프 사이클에 따라 상태를 업데이트한다.

• Router는 클래스형, 함수형 컴포넌트에서 모두 사용 가능
• Router를 추가 할 경우 두 개의 Router를 추천해주는데 각각 클래스형, 함수형임

 

useRouter는 함수형 컴포넌트의 라이프사이클(life cycle)에 따라서 사용한다.

 

그렇기 때문에 nextJS에서는 useRouter를 권장한다.

state와 hook에 맞춰서 동작을 에측하기 쉬워지기 때문임.

 

• 실제로 useRouter와 Router의 형태는 동일하다.

 

언제 씀?

• Router는 전역 객체이기 때문에 리액트 외부의 장소에서도 사용 할 수 있다
• 웹뷰에서 페이지를 강제로 이동시킬 경우, history가 꼬이지 않게 하기 위해서 사용할 수 있다.
•  웹뷰의 url을 직접 조작하지 않고, evaluateJavascript 를 이용한 전역 함수 실행 이후 next.JS Router로 이동시켜 페이지 이동을 제어할 수 있다.

 

 

useRouter를 import 할 때

 

 

next/router 와 next/navigation 가 존재한다.

 

 

 

 next/router를 이용해 import시 다음과 같은 오류가 발생하고,

 

next/navigation을 이용하면 정상적으로 작동하는 것을 확인했다.