[Next.js beta doc] usePathname

Next.js 베타 문서 번역 프로젝트

GitHub - XionWCFM/Nextjs-docs-Korean-translation: 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다.

https://beta.nextjs.org/docs/api-reference/use-pathname

위 문서에 대한 번역을 진행합니다.

Next.js 베타 문서 번역 프로젝트는 상단 깃허브에서 확인할 수 있습니다.

번역시점은 2023-05-03로 공식문서의 추가적인 업데이트가 있을 수 있습니다.

번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
 
역자의 개인적인 의견에 대한 내용은

이 안에서 이루어집니다.

 

usePathname

 

usePathname는 현재 URL의 경로 이름(pathname)을 읽을 수 있는 클라이언트 컴포넌트 훅입니다.

//app/example-client-component.tsx
"use client";

import { usePathname } from "next/navigation";

export default function ExampleClientComponent() {
  const pathname = usePathname();
  return <>Current pathname: {pathname}</>;
}

 

Good to know

• usePathname은 클라이언트 컴포넌트 훅으로, 서버 컴포넌트에서는 지원되지 않습니다.
• 폴백 경로(fallback route)가 렌더링되거나 Next.js가 자동으로 페이지 디렉토리 페이지를 정적으로 최적화하고 라우터가 준비되지 않은 경우 usePathname은 null을 반환할 수 있습니다.
• Next.js는 프로젝트에 앱과 페이지 디렉토리 모두가 감지되면 자동으로 타입을 업데이트합니다.

 

API 레퍼런스

const pathname = usePathname();

 

매개변수

usePathname은 매개변수를 사용하지 않습니다.

 

반환값

usePathname은 현재 URL의 경로 이름을 나타내는 문자열을 반환합니다. 예를 들면 다음과 같습니다.

URL	반환값
/	'/'
/dashboard	'/dashboard'
/dashboard?v=2	/dashboard'
/blog/hello-world	'/blog/hello-world'

 

예제

 

라우트 변경에 대한 응답으로 뭔가 실행하기

//app / example - client - component.tsx;
("use client");

import { usePathname, useSearchParams } from "next/navigation";

function ExampleClientComponent() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  useEffect(() => {
    // 여기서 뭔가를 실행합니다...
  }, [pathname, searchParams]);
}

useSelectedSegments

Edge Runtime