React & Next.js

Next.js useRouter 사용법 및 옵션 활용법 가이드

0

Next.js는 리액트 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 SEO에 매우 유리합니다. Next.js의 라우터 기능은 페이지 이동과 URL 관리를 쉽게 해줍니다. `useRouter` 훅을 활용하면 클라이언트 측 라우팅을 손쉽게 구현할 수 있습니다. 이번 가이드에서는 `useRouter`의 사용법, 각 옵션의 종류와 사용법, 그리고 실용적인 활용법에 대해 자세히 알아보겠습니다.

1. useRouter 기본 사용법

`useRouter`는 Next.js에서 제공하는 훅으로, 클라이언트 측 라우팅과 관련된 다양한 기능을 제공합니다.

import { useRouter } from 'next/router';

const MyComponent = () => {
    const router = useRouter();
    
    // 현재 경로와 쿼리 파라미터를 가져옵니다.
    const { pathname, query } = router;
    
    return (
        <div>
            <p>Current path: {pathname}</p>
            <p>Query parameters: {JSON.stringify(query)}</p>
        </div>
    );
};

2. router.push 메서드와 옵션

`router.push` 메서드는 페이지 이동을 위해 사용됩니다. URL을 변경하고 페이지를 새로 고침 없이 업데이트할 수 있습니다.

기본 사용법

const handleClick = () => {
    router.push('/new-page');
};

쿼리 파라미터 추가

router.push({
    pathname: '/new-page',
    query: { search: 'keyword' },
});

shallow 옵션

`shallow` 옵션은 페이지를 다시 로드하지 않고 URL만 변경할 때 사용됩니다.

router.push('/new-page', undefined, { shallow: true });

예제 코드 살펴보기

다음은 간단한 샘플 코드입니다:

import { useRouter } from 'next/router';

const router = useRouter();
const type = 'example'; // 예제 type 변수

router.push(
    {
        pathname: router.pathname,
        query: {
            ...router.query,
            searchType: type,
        },
    },
    `/new-path?searchType=${type}`,
    { shallow: true },
);

동작 방식

첫 번째 인자:
`{ pathname: router.pathname, query: { …router.query, searchType: type } }` : 실제로 이동할 경로와 쿼리 파라미터를 정의합니다. 예를 들어, 현재 경로가 `/current-path`이고 쿼리 파라미터가 `{ page: 1 }`인 경우, 이 객체는 `{ pathname: ‘/current-path’, query: { page: 1, searchType: ‘example’ } }`가 됩니다.
두 번째 인자:
`/new-path?searchType=example` : 브라우저 주소 표시줄에 표시될 URL입니다. 이 URL은 브라우저 주소 표시줄에 보이지만, 실제 이동 경로에 영향을 미치지 않습니다.
세 번째 인자:
`{ shallow: true }` : 페이지를 리로드하지 않고 URL만 변경합니다.

결과

  • 이동 경로: 실제로 이동하는 경로는 첫 번째 인자에 정의된 경로와 쿼리 파라미터입니다. 즉, Next.js 라우터는 `{ pathname: ‘/current-path’, query: { page: 1, searchType: ‘example’ } }`를 기준으로 페이지를 로드합니다.
  • 표시되는 경로: 브라우저 주소 표시줄에는 `/new-path?searchType=example`가 표시됩니다. 이는 사용자가 URL을 쉽게 이해하고 공유할 수 있게 합니다.

3. router.replace 메서드

`router.replace` 메서드는 `router.push`와 유사하지만, 히스토리 스택을 관리하는 방식이 다릅니다. 브라우저 히스토리에 새로운 항목을 추가하지 않고 현재 항목을 교체합니다.

router.replace('/new-page');

4. router.prefetch 메서드

`router.prefetch` 메서드는 특정 페이지를 사전 로드하여 사용자 경험을 향상시킵니다. 링크 태그에 자동으로 적용됩니다.

useEffect(() => {
    router.prefetch('/new-page');
}, []);

5. router.events 이벤트

Next.js의 라우터는 페이지 이동 시 다양한 이벤트를 제공합니다. 예를 들어, 로딩 상태를 표시할 수 있습니다.

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const MyComponent = () => {
    const router = useRouter();

    useEffect(() => {
        const handleRouteChange = (url) => {
            console.log('App is changing to: ', url);
        };

        router.events.on('routeChangeStart', handleRouteChange);

        return () => {
            router.events.off('routeChangeStart', handleRouteChange);
        };
    }, []);

    return <div>MyComponent</div>;
};

6. 실용적인 활용법

검색 필터링

const handleFilterChange = (filter) => {
    router.push({
        pathname: router.pathname,
        query: { ...router.query, filter },
    }, undefined, { shallow: true });
};

동적 경로

router.push('/product/[id]', `/product/${productId}`);

7. SEO 최적화 전략

Next.js의 라우팅 기능을 활용하여 SEO를 최적화할 수 있습니다. 의미 있는 URL 구조를 만들고, 클라이언트 측 네비게이션을 통해 사용자 경험을 향상시키십시오.

  • 의미 있는 URL: 예를 들어, `/products/shoes` 대신 `/shoes`로 단순화.
  • 메타 태그: 각 페이지에 적절한 메타 태그를 설정하여 검색 엔진에 페이지 정보를 제공.
import Head from 'next/head';

const SEO = () => (
    <Head>
        <title>My SEO Title</title>
        <meta name="description" content="My SEO description" />
        <meta name="keywords" content="nextjs, seo, tutorial" />
    </Head>
);

마치며

지금까지 Next.js의 `useRouter`살펴보았습니다. 이 가이드를 통해 Next.js의 `useRouter`를 활용한 라우팅 기능을 충분히 이해하고, SEO에 최적화된 웹사이트를 구축하는 데 도움이 되길 바랍니다.

답글 남기기