Next.js 13 next/navigation

Intro

넥스트 13이전에는 useRouter를써서 쿼리스트링을 수정하여 데이터를 패칭받으면서
리액트보다 훨씬 간결하게 처리가 가능하구나 생각하면서 사용해왔다.

하지만 next 13버전으로 업그레이드 되면서 app디렉토리를 사용 할 경우

import { useRouter } from 'next/router';

는 사용되지 않으며,

import {
  usePathname,
  useRouter,
  useSearchParams,
  useSelectedLayoutSegment,
  useSelectedLayoutSegments,
  redirect,  
  notFound,
} from 'next/navigation';

이런식으로 next/navigation에서 사용 할 수 있게 바뀌었다.

개인적으로는 이전 버전이 사용 할 때 명확해서 다소 아쉬운 부분이 있으나,
이렇게 한 깊은 뜻은 분명 있으리라 생각하며 적용해 볼 생각이다.

usePathname

next/router에서는

const router = useRouter();
const { pathname } = router;

형태로 주로 사용하였으며, 현재 URL의 path를 문자열로 반환한다.

useRouter

next/router에서는

const router = useRouter();
const { push, back, replace /* ... */ } = router;

등과 같이 next/navigation에서도 useRouter에 페이지 이동에 관련된 함수를 모아 놓은 듯 하다.
조금 다른 점은
next/router

const router = useRouter();
const { push, pathname, query } = router;
router.push({
  pathname, 
  query : { 
    ...query, 
    key : value 
  }
});

위에서 처럼 push할때 쿼리스트링을 object형태로 보낼 수 있었지만,
next/navigation에서는 query를 useSearchParams에서 관리 할 수 있게 분리되어있다.

useSearchParams

현재 프로젝트에서 URL파라미터로 데이터 패칭을 많이 하는 만큼 가장 많이 쓰일 듯하여 관심을 가지고 보고 있으며,
내장 메소드 또한 많기에 자세한 부분은 다음 블로그에 남겨볼 생각이다.