Next.js/Next.js 베타 문서 번역

[Next.js beta doc] usePathname

JeanneLee57 2023. 5. 3. 21:54

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

 

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

이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. Contribute to XionWCFM/Nextjs-docs-Korean-translation development by creating an account on GitHub.

github.com

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

 

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