[Next] UseSelectedLayoutSegment / UsePathname Hook

 

[Next] UseSelectedLayoutSegment / UsePathname Hook

 

 

UseSelectedLayoutSegment ?

현재 레이아웃 app기준 가장 가까운 폴더들의 segment를 리턴해준다.

아래와 같은 모양이라면

compose / explore / home / messages / search/ username 으로 라우팅했을 경우 해당 세그먼트 리턴해준다.

만약 그아래의 세그먼트들도 원한다면

UseSelectedLayoutSegments를 사용하면 된다.

['compose', 'tweet] / [userName, status, id] 이런식으로 나오게 된다.

📦app
 ┣ 📂(afterLogin)
 ┃ ┣ 📂@modal
 ┃ ┃ ┣ 📂(.)compose
 ┃ ┃ ┃ ┗ 📂tweet
 ┃ ┃ ┃ ┃ ┣ 📜modal.module.scss
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┗ 📜default.tsx
 ┃ ┣ 📂compose
 ┃ ┃ ┗ 📂tweet
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂explore
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂home
 ┃ ┃ ┣ 📂_component
 ┃ ┃ ┃ ┣ 📜postForm.module.scss
 ┃ ┃ ┃ ┣ 📜PostForm.tsx
 ┃ ┃ ┃ ┣ 📜tab.module.scss
 ┃ ┃ ┃ ┣ 📜Tab.tsx
 ┃ ┃ ┃ ┗ 📜TabProvider.tsx
 ┃ ┃ ┣ 📜home.module.scss
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂messages
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂search
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂[username]
 ┃ ┃ ┣ 📂status
 ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┗ 📜page.tsx

 

useSelectedLayoutSegment은 Next.js 14에서 도입된 클라이언트 컴포넌트 훅입니다.

이 훅을 사용하면 특정 레이아웃에서 호출된 활성 라우트 세그먼트를 한 단계 아래에서 읽을 수 있습니다.

이는 부모 레이아웃 안에서 탭과 같은 네비게이션 UI를 구성할 때 유용하며,

활성 자식 세그먼트에 따라 스타일을 변경할 수 있습니다.

*컴포넌트에서 사용되어야 하며, 서버 컴포넌트에서는 사용할 수 없습니다.

* layout.tsx에서 import한 컴포넌트만 쓸 수 있습니다. page.tsx에서 쓰면 무조건 null

 

 

 

 

사용법

예를 들어, 다음과 같은 구조를 가진 애플리케이션에서 'app' 페이지 내에서

여러 카테고리('compose', 'explore', 'home' 등)를 탭으로 구분할 때

useSelectedLayoutSegment을 사용할 수 있습니다.

📦app
 ┣ 📂(afterLogin)
 ┃ ┣ 📂@modal
 ┃ ┃ ┣ 📂(.)compose
 ┃ ┃ ┃ ┗ 📂tweet
 ┃ ┃ ┃ ┃ ┣ 📜modal.module.scss
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┗ 📜default.tsx
 ┃ ┣ 📂compose
 ┃ ┃ ┗ 📂tweet
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂explore
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂home

 

 

products/[category].js 페이지에서 useSelectedLayoutSegment을 사용하여 현재 선택된 카테고리를 파악하고, 해당 정보를 기반으로 UI를 동적으로 조정할 수 있습니다.

 

import { useSelectedLayoutSegment } from 'next/navigation';

function CategoryPage() {
    const category = useSelectedLayoutSegment();
  
    return (
        <div>
            <h1>Category: {category}</h1>
            {/* 카테고리에 따라 다른 내용을 렌더링 */}
        </div>
    );
}

export default CategoryPage;

 

** 이 훅은 주로 클라이언트 컴포넌트에서 사용되어야 하며, 서버 컴포넌트에서는 사용할 수 없습니다.

** 따라서 이를 사용하기 위해서는 파일 상단에 use client를 선언해 클라이언트 컴포넌트임을 명시해야 합니다.

** useSelectedLayoutSegment는 layout.tsx에서 import한 컴포넌트만 쓸 수 있습니다. page.tsx에서 쓰면 무조건 null

이처럼 useSelectedLayoutSegment은 동적 라우팅과 함께 사용되어 복잡한 레이아웃 구조에서도 각 세그먼트에 따라 조건부 렌더링을 용이하게 할 수 있습니다.

 

 

 

 

 

UsePathname ?

Next.js 14에서 도입된 클라이언트 컴포넌트 훅입니다.

이 훅은 현재 URL의 경로명(pathname)을 읽을 수 있게 해주는 기능을 제공합니다.

특히, 이 훅은 클라이언트 컴포넌트에서만 사용될 수 있으며, 서버 컴포넌트에서는 사용할 수 없습니다.

* pathname  = 도메인주소 /부터 ?앞까지 ( daum.net/post/1234/detail?name=xxx... )
?이후는 쿼리스트링이나 서치파람스라고 부른다.

 

 

 

사용법

// 'use client' 지시어를 파일 상단에 추가하여 클라이언트 컴포넌트임을 명시
'use client';

import { usePathname } from 'next/navigation';

export default function PageComponent() {
    const pathname = usePathname();

    return (
        <div>
            <p>현재 경로명: {pathname}</p>
        </div>
    );
}

이 코드는 컴포넌트가 렌더링될 때 현재 브라우저의 URL에서 경로명 부분을 추출하여 화면에 표시합니다.

예를 들어, 사용자가 www.example.com/about URL에 접속해 있다면,

"현재 경로명: /about"과 같은 텍스트가 렌더링될 것입니다.

*usePathname은 클라이언트 컴포넌트에서만 사용 가능하므로, 서버 컴포넌트에서 이 훅을 호출하려고 하면 오류가 발생합니다.