Language/Next.js

[Next.js] useRouter와 withRouter 13 사용법

웹 개발은 현재 많은 사람들에게 필수적인 기술이 되었습니다. 특히 프론트엔드 개발자들은 사용자 친화적인 웹 애플리케이션을 구축하기 위해 다양한 도구와 기술을 사용하고 있습니다. 이 중에서도 Next.js는 React 기반의 프레임워크로서, 빠른 개발과 SEO 최적화를 위한 훌륭한 선택 중 하나입니다. 그리고 이번 글에서는 Next.js에서 중요한 역할을 하는 useRouter의 사용법에 대해 자세히 알아보겠습니다.

useRouter와 withRouter란?

Next.js에서 useRouter와 withRouter는 라우팅과 관련된 작업을 수행하는 도구입니다.

useRouter란?

useRouter는 Next.js에서 제공하는 훅(Hook) 중 하나로, 현재 페이지의 라우트 정보와 URL 파라미터, 쿼리 파라미터 등을 가져오는 데 사용됩니다. 이 훅을 사용하면 함수 컴포넌트 내에서 라우트와 관련된 정보에 쉽게 접근할 수 있습니다. 예를 들어, 현재 페이지의 URL을 가져오거나 페이지 간 이동을 처리하는 데에 유용하게 사용됩니다.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const currentUrl = router.asPath;

  return <p>현재 페이지 URL: {currentUrl}</p>;
}

withRouter란?

withRouter는 Next.js의 클래스 컴포넌트에서 라우트 정보를 사용하기 위한 고차 컴포넌트(Higher Order Component)입니다. 클래스 컴포넌트에서 withRouter를 사용하면 this.props.router를 통해 라우트 정보에 접근할 수 있습니다. 이를 통해 클래스 기반 컴포넌트에서 라우트 정보를 다룰 수 있습니다.

import { withRouter } from 'next/router';

class MyComponent extends React.Component {
  render() {
    const currentUrl = this.props.router.asPath;
    return <p>현재 페이지 URL: {currentUrl}</p>;
  }
}

export default withRouter(MyComponent);

useRouter는 함수 컴포넌트에서 주로 사용되고, withRouter는 클래스 컴포넌트에서 사용됩니다. 이들은 Next.js에서 라우팅과 관련된 작업을 더 쉽게 수행할 수 있도록 도와주는 도구입니다.

고차 컴포넌트(Higher Order Component)란?

고차 컴포넌트(Higher Order Component, HOC)는 리액트(React)에서 사용되는 디자인 패턴 중 하나로, 컴포넌트의 로직을 재사용하고 컴포넌트 간의 관심사 분리를 촉진하는 방법입니다. 고차 컴포넌트는 함수로 구현되며, 기존 컴포넌트를 입력으로 받아 새로운 컴포넌트를 반환합니다. 이 패턴은 주로 다음과 같은 상황에서 활용됩니다:

로직의 재사용: 여러 컴포넌트에서 동일한 로직이 필요한 경우, 이 로직을 고차 컴포넌트로 분리하여 중복을 제거하고 코드를 재사용할 수 있습니다.
상태 관리: 공통 상태나 상태 업데이트 로직을 여러 컴포넌트에서 공유할 때, HOC를 사용하여 상태 관리를 추상화할 수 있습니다.
렌더링 컨트롤: 컴포넌트의 렌더링 흐름을 제어하고 조작해야 할 때, HOC를 사용하여 렌더링 로직을 추가하거나 수정할 수 있습니다.

예를 들어, 인증된 사용자만 특정 페이지에 접근할 수 있도록 하는 기능을 구현한다고 가정해봅시다. 이때, 고차 컴포넌트를 사용하여 다음과 같은 방식으로 인증 로직을 재사용할 수 있습니다:

import React from 'react';

const withAuthentication = (WrappedComponent) => {
  class WithAuthentication extends React.Component {
    // 인증 로직을 여기에 구현

    render() {
      // 인증 여부에 따라 다르게 렌더링
      if (authenticated) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <div>인증이 필요합니다.</div>;
      }
    }
  }

  return WithAuthentication;
};

export default withAuthentication;

위 예제에서 withAuthentication 함수는 고차 컴포넌트로, 입력으로 받은 WrappedComponent를 감싸서 인증 로직을 추가합니다. 이를 통해 인증된 사용자만 해당 컴포넌트에 접근할 수 있도록 할 수 있습니다.

고차 컴포넌트는 리액트 생태계에서 널리 사용되며, 컴포넌트의 재사용성과 관심사의 분리를 향상시키는데 도움을 줍니다.

`useRouter` 불러오기

첫 번째 단계는 useRouter를 불러오는 것입니다. 이것은 다음과 같이 할 수 있습니다:

import { useRouter } from 'next/router';

라우트 파라미터 다루기

라우트 파라미터를 다루는 것은 Next.js 프레임워크에서 중요한 부분입니다. 라우트 파라미터란 URL의 일부로 전달되는 정보를 의미합니다. 정보를 사용하여 웹 페이지의 동적인 콘텐츠를 생성하거나 페이지 간에 데이터를 전달할 수 있습니다. 라우트 파라미터를 다루는 예시를 살펴보겠습니다. 가령, 웹 애플리케이션에서 특정 제품의 상세 정보를 보여주는 페이지를 만든다고 가정해봅시다. URL은 "/products/{제품ID}"와 같이 구성됩니다. 이때 {제품ID} 부분이 라우트 파라미터입니다.

useRouter를 사용하면 이 라우트 파라미터를 쉽게 가져올 수 있습니다. 다음과 같은 코드를 사용하면 됩니다:

import { useRouter } from 'next/router';

function ProductDetail() {
  const router = useRouter();
  const { 제품ID } = router.query;

  // 가져온 제품ID를 사용하여 해당 제품의 정보를 표시하거나 다룰 수 있음
}

이렇게 useRouter를 활용하면 URL에서 전달된 라우트 파라미터를 변수로 받아와서 페이지 내에서 활용할 수 있습니다. 이를 통해 동적인 웹 페이지를 만들거나 필요한 데이터를 처리하는 데 도움이 됩니다.

페이지 이동하기

페이지 이동은 웹 애플리케이션에서 중요한 작업 중 하나입니다. 사용자가 다른 페이지로 이동하거나 원하는 콘텐츠를 찾기 위해서는 페이지 간의 전환을 쉽게 할 수 있어야 합니다. Next.js에서는 useRouter를 사용하여 페이지 이동을 간단하게 처리할 수 있습니다.

router.push

페이지 이동은 router.push() 메서드를 사용하여 수행됩니다. 예를 들어, 다음과 같이 코드를 작성하여 새로운 페이지로 이동할 수 있습니다:

import { useRouter } from 'next/router';

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

  const handleButtonClick = () => {
    // '/new-page'로 페이지 이동
    router.push('/new-page');
  };

  return (
    <div>
      <button onClick={handleButtonClick}>새로운 페이지로 이동</button>
    </div>
  );
}

router.push 상세옵션

Next.js에서 router.push 메서드를 사용할 때 url과 as 옵션을 함께 사용하여 페이지 전환과 주소 표시를 다르게 설정할 수 있습니다. 이러한 옵션은 주로 동적 라우팅 또는 프리티파이(pretty) URL을 구현할 때 유용합니다. 다음으로 url과 as 옵션에 대한 설명을 제공합니다:

url 옵션:
- url 옵션은 실제로 브라우저의 주소 표시줄에 표시되는 URL을 지정합니다.
- 일반적으로 라우팅 경로를 지정하며, 동적 라우팅에서 경로 매개변수를 포함할 수 있습니다.
- 예를 들어, /products/[id]와 같은 동적 라우팅에서 url에는 /products/123과 같은 주소를 지정할 수 있습니다.
as 옵션:
- as 옵션은 브라우저 주소 표시줄에 실제로 표시되는 대체 URL을 지정합니다.
- 주로 SEO 및 사용자 친화적인 URL을 만들 때 사용됩니다.
- 예를 들어, url이 /products/123이고 as가 /products/my-awesome-product인 경우, 사용자는 /products/my-awesome-product 주소를 보게 되지만 실제로는 /products/123 페이지로 이동합니다.

예제 코드를 통해 이해를 돕겠습니다:

import { useRouter } from 'next/router';

function ProductDetail() {
  const router = useRouter();

  const navigateToProduct = () => {
    // 실제 주소는 '/products/123'로 표시되지만 사용자에게는 '/products/my-awesome-product' 주소를 보여줍니다.
    router.push({
      pathname: '/products/[id]',
      query: { id: '123' },
    }, '/products/my-awesome-product');
  };

  return (
    <button onClick={navigateToProduct}>제품 상세 페이지로 이동</button>
  );
}

위의 예제에서 router.push 메서드는 url에는 실제 페이지 경로인 /products/123을 설정하고, as에는 사용자 친화적인 주소인 /products/my-awesome-product를 설정합니다. 이렇게 하면 사용자는 /products/my-awesome-product 주소를 보게 되지만 페이지가 실제로는 /products/123으로 로드됩니다.

options:
Next.js에서 router.push 메서드를 사용할 때 options 객체를 사용하여 페이지 이동을 더 세밀하게 제어할 수 있습니다. options 객체는 다양한 설정을 제공하며, 주로 페이지 전환 및 라우팅 동작을 사용자 지정할 때 유용합니다. 다음은 router.push의 options 객체에 대한 설명입니다:

3.1 shallow 옵션:

shallow 옵션은 페이지를 새로고침하지 않고 URL을 변경할 때 사용됩니다.
true로 설정하면 페이지 컴포넌트의 componentDidUpdate가 호출되지 않고, URL만 변경됩니다.
이를 사용하면 페이지 이동을 더 빠르게 처리할 수 있습니다.
import { useRouter } from 'next/router'; function navigateWithoutRefresh() { const router = useRouter(); router.push('/new-page', undefined, { shallow: true }); }

3.2 scroll 옵션:
scroll 옵션은 페이지 이동 후 스크롤 위치를 제어합니다.
false로 설정하면 새 페이지로 이동할 때 스크롤 위치가 맨 위로 이동하지 않습니다.
기본값은 true입니다.
import { useRouter } from 'next/router'; function navigateWithoutScroll() { const router = useRouter(); router.push('/new-page', undefined, { scroll: false }); }

3.3 locale 옵션:
다국어 지원을 위해 locale 옵션을 사용하여 언어를 변경할 수 있습니다.
예를 들어, /en에서 /fr로 이동하려면 다음과 같이 설정할 수 있습니다:
import { useRouter } from 'next/router'; function changeLocale() { const router = useRouter(); router.push('/fr', undefined, { locale: 'fr' }); }

3.4 기타 옵션:
options 객체에는 다른 라우팅 관련 옵션도 포함될 수 있습니다. 예를 들어, replace 옵션을 사용하여 router.replace와 유사한 동작을 할 수 있습니다.
import { useRouter } from 'next/router'; function navigateWithReplace() { const router = useRouter(); router.push('/new-page', undefined, { replace: true }); }

router.push 메서드의 options 객체를 사용하면 페이지 전환 및 라우팅 동작을 더 세밀하게 제어할 수 있으므로, 프로젝트 요구사항에 따라 적절한 옵션을 선택하여 사용할 수 있습니다.

이와 같이 useRouter를 활용하면 버튼 클릭과 같은 이벤트에서 router.push()를 호출하여 새로운 페이지로 이동할 수 있습니다. 이것은 사용자가 다양한 상황에서 애플리케이션 내에서 자유롭게 페이지를 탐색할 수 있도록 도와줍니다.

router.replace

Next.js의 router.replace 메서드는 페이지를 변경하고 페이지 이동을 수행하는 데 사용되는 Next.js의 라우팅 관련 함수 중 하나입니다. 이 메서드는 주로 브라우저의 주소 표시줄을 변경하고 새로운 페이지로 이동할 때 사용됩니다. router.replace 메서드는 페이지를 이동할 때 브라우저의 뒤로가기 버튼을 사용자가 클릭했을 때 이전 페이지로 돌아가지 않도록 하는 점에서 router.push와 다릅니다.

다음은 router.replace 메서드의 주요 특징과 사용법입니다:

주소 변경: router.replace 메서드는 브라우저의 주소 표시줄을 새로운 주소로 변경합니다. 이를 통해 사용자가 주소를 직접 변경하지 않고도 페이지 간 전환을 할 수 있습니다.
이전 페이지 제거: router.replace를 사용하면 이전 페이지가 브라우저의 히스토리 스택에서 제거됩니다. 이는 사용자가 뒤로가기 버튼을 클릭했을 때 이전 페이지로 돌아가지 않는다는 의미입니다.
예제 코드:

import { useRouter } from 'next/router';

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

  const handleClick = () => {
    // '/new-page'로 페이지를 변경하고 이전 페이지를 히스토리 스택에서 제거합니다.
    router.replace('/new-page');
  };

  return (
    <button onClick={handleClick}>새 페이지로 이동</button>
  );
}

router.replace 메서드는 주로 로그인 후 리다이렉션 또는 페이지 전환 시 사용됩니다. 페이지 이동이나 주소 변경을 수행할 때 이전 페이지를 히스토리 스택에 남기지 않고 싶을 때 유용합니다.

쿼리 파라미터 다루기

쿼리 파라미터를 처리할 때도 useRouter가 유용합니다. 다음과 같이 현재 URL의 쿼리 파라미터를 가져올 수 있습니다:

const router = useRouter();
const { queryParam } = router.query;

라우팅 이벤트 처리하기

useRouter를 사용하면 라우팅 이벤트를 처리할 수 있습니다. 예를 들어, 다음과 같이 페이지가 전환될 때 어떤 작업을 수행할 수 있습니다:

router.events.on('routeChangeStart', (url) => {
  // 페이지가 전환되기 전에 실행할 코드
});

결론

useRouter는 Next.js에서 웹 애플리케이션을 개발할 때 필수적인 도구 중 하나입니다. 이 글에서 다룬 내용을 숙지하면, 더 효율적이고 사용자 친화적인 웹 애플리케이션을 개발하는 데 도움이 될 것입니다.

자주 묻는 질문 (FAQs)

useRouter를 사용하는 이유는 무엇인가요?
useRouter를 사용하면 Next.js 애플리케이션에서 라우팅을 쉽게 다룰 수 있고, 페이지 간의 전환 및 URL 파라미터 관리가 용이해집니다.
useRouter를 어떻게 불러와야 하나요?
import { useRouter } from 'next/router';와 같이 불러올 수 있습니다.
쿼리 파라미터를 어떻게 다루나요?
useRouter를 사용하여 router.query를 통해 쿼리 파라미터에 접근할 수 있습니다.
라우팅 이벤트를 처리하는 방법은 무엇인가요?
router.events.on()을 사용하여 라우팅 이벤트를 처리할 수 있습니다.
useRouter를 사용한 웹 애플리케이션의 장점은 무엇인가요?
useRouter를 활용하면 더 효율적인 웹 개발이 가능하며, 사용자 경험을 개선하는 데 도움을 줍니다.

Next.js 공식 홈페이지 - https://nextjs.org/docs/pages/api-reference/functions/use-router#routerpush

Functions: useRouter | Next.js

Using Pages Router Features available in /pages

nextjs.org

저작자표시 비영리 변경금지

'Language > Next.js' 카테고리의 다른 글

[Next.js] 새로운 탭(창) 여는 법 - Version 13 (1)	2023.10.27
[Next.js] SSG vs SSR vs ISR vs CSR (1)	2023.10.19
[Next.js] getStaticPaths - 12버전 (0)	2023.10.02
[Next.js] 13.5 소식, 무엇이 업데이트 되었을까? (0)	2023.09.24
Next.js vs React.js 비교 및 차이 (0)	2023.09.10

Contents

새소식

인기 검색어

[Next.js] useRouter와 withRouter 13 사용법

useRouter와 withRouter란?

useRouter란?

withRouter란?

고차 컴포넌트(Higher Order Component)란?

`useRouter` 불러오기

라우트 파라미터 다루기

페이지 이동하기

router.push

router.push 상세옵션

router.replace

쿼리 파라미터 다루기

라우팅 이벤트 처리하기

결론

자주 묻는 질문 (FAQs)

'Language > Next.js' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바

[Next.js] useRouter와 withRouter 13 사용법

useRouter와 withRouter란?

useRouter란?

withRouter란?

고차 컴포넌트(Higher Order Component)란?

useRouter 불러오기

라우트 파라미터 다루기

페이지 이동하기

router.push

router.push 상세옵션

router.replace

쿼리 파라미터 다루기

라우팅 이벤트 처리하기

결론

자주 묻는 질문 (FAQs)

'Language > Next.js' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바

`useRouter` 불러오기