활성 링크 (The Active Link)

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 34번째.

내비게이션 바가 있는 모든 사이트는 현재 위치한 링크를 강조 표시합니다. 이렇게 하려면 컴포넌트가 서버가 사후에 알려줄 수 없는 한 가지 정보, 즉 현재 화면에 어떤 URL이 있는지를 알아야 합니다.

next/navigation이 다음과 같이 제공합니다:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // /about에서 pathname은 문자열 '/about'입니다
}

이것은 훅(hook)이므로, 이미 알고 있는 규칙이 적용됩니다. 파일 상단이 'use client'로 시작하는 컴포넌트 내부에서만 동작합니다. 이것이 바로 서버에서 렌더링되는 앱에서 내비게이션 바가 주로 몇 안 되는 클라이언트 컴포넌트(client components) 중 하나인 이유입니다. 내비게이션 바는 라우트가 변경될 때마다 다시 실행되어야 하기 때문입니다.

거기서부터는 단순 비교입니다:

<Link
    href="/menu"
    className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
    Menu
</Link>

nav가 위치한 곳에 주의하세요: 바로 layout 안입니다. nav는 한 번 렌더링되고 모든 내비게이션 동안 유지되므로, 리마운트가 아닌 pathname의 변경에 의해 다시 렌더링됩니다.

챌린지

쉬움

탐색 바가 작동하지만, 현재 어떤 페이지에 있는지 표시되지 않습니다. components/Nav.jsx에서 이를 수정하세요.

usePathname()을 호출하고 그 결과를 pathname에 저장하세요.
각 링크의 href가 pathname과 일치할 때는 className을 "nav-link active"로, 그렇지 않을 때는 "nav-link"로 지정하세요.

Home 링크는 /를 가리키고, Menu 링크는 /menu를 가리킵니다.

직접 해보기

import './globals.css';
import Nav from '../components/Nav.jsx';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <Nav />
                {children}
            </body>
        </html>
    );
}