[React.js] 라우팅 관련 기능들 정리 (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate

라우팅 관련 기능들 정리 (React Router) : 
useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate

들어가며

• 리액트(React.js)에서 라우팅을 위해 사용되는 관련 기능들에 대해 간단하게 정리해본다.
• 페이지 이동 및 라우팅을 위해 리액트 라우터(React Router)의 여러 훅과 컴포넌트, 함수들을 사용할 수 있다.

 

① useNavigate()

개념

• 리액트 라우터(React Router) v6 에서 제공하는 훅
• 프로그래밍적으로 다른 경로로 이동하기 위해 사용된다.
• 컴포넌트 내에서 버튼 클릭, 이벤트 발생 시 특정 페이지로 이동할 때 사용한다.

 

특징

• @push@와 @replace@를 설정할 수 있어 히스토리에 추가하거나 현재 히스토리를 교체할 수 있다.
• 상태값을 전달하여 이동 후 데이터를 사용할 수 있다.

 

예제 코드

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/new-page');  // '/new-page'로 이동
  };

  return <button onClick={handleClick}>Go to new page</button>;
}

 

② useNavigation()

개념

• 주로 경로 변경 상태( 페이지 이동 중 로딩 상태 등)를 추적하는 데 사용된다.
  • @idle@ : 현재 페이지가 로드되었고, 로딩 중이 아닌 상태
  • @loading@ : 현재 페이지가 로딩되고 있는 상태 → 로딩 스피너 표시하면 좋음.
  • @submitting@ : 폼 제출 중인 상태 → 로딩 상태 표시하면 좋음.
• 페이지 이동 중에 로딩 스피너 등을 보여주고 싶은 경우에 사용하면 유용하다.

 

특징

• @navigation.state@ 값을 통해 페이지가 로드 중인지, 완료됐는지 등을 알 수 있다.
• @useNavigate@처럼 이동을 직접 수행하는 것이 아니라, 이동 중 상태를 감시하는 용도로 주로 사용된다.

 

예제 코드

import { useNavigation } from 'react-router-dom';

function MyComponent() {
  const navigation = useNavigation();

  if (navigation.state === 'loading') {
    return <p>Loading...</p>;
  }

  if (navigation.state === 'submitting') {
    return <p>Submitting...</p>;
  }

  return <p>Content loaded</p>;
}

 

③ redirect()

개념

• 페이지가 리다이렉션될 때 사용되는 기능
• 주로 서버 사이드 렌더링(SSR)이나 조건에 따라 특정 경로로 강제 이동시키는 데 사용된다.
• 라우팅 설정에서 특정 조건에 따라 리다이렉션할 때 사용한다.

 

특징

• 서버 사이드 또는 클라이언트 사이드에서 사용 가능하다.
• 조건에 따라 강제적으로 다른 경로로 이동시키는 용도로 주로 사용된다.

 

예제 코드

import { redirect } from 'react-router-dom';

export function loader() {
  const isLoggedIn = false;
  
  if (!isLoggedIn) {
    return redirect('/login');  // 로그인이 안되어 있으면 로그인 페이지로 리다이렉트
  }

  return null;
}

 

④ useLocation()

개념

• 현재 URL의 경로 정보에 접근할 수 있는 훅
• @pathname@, @search@, @hash@ 등의 정보에 접근할 수 있어 현재 URL 상태를 기반으로 컴포넌트의 렌더링을 제어할 때 유용하다.
  
  • @pathname@ : 현재 URL의 경로
  • @search@ : URL의 쿼리 문자열 (예 : @?query=value@)
  • @hash@ : URL의 해시 (예: @#section@)

 

예제 코드

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  return (
    <div>
      <p>Current path: {location.pathname}</p>
      <p>Current query: {location.search}</p>
      <p>Current hash: {location.hash}</p>
    </div>
  );
}

 

⑤ useParams()

개념

• 동적 라우트 매개변수에 접근할 수 있는 훅
• URL에 포함된 매개변수를 가져와 해당 값을 기반으로 데이터를 요청하거나 렌더링할 때 사용한다.
  • 예) URL이 @/users/:id@일 때, @id@ 값을 가져와 사용할 수 있다.

 

예제 코드

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();  // URL에서 동적으로 id 값 가져오기

  return <p>User ID: {id}</p>;
}

 

⑥ useHistory()

개념

• 리액트 라우터 v5에서 사용되었던 기능
  • 리액트 라우터 v6부터는 @useNavigate@로 대체되었다.
• 현재 히스토리를 조작하고 경로를 변경하는 데 사용되는 훅

 

예제 코드

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  const goToHome = () => {
    history.push('/home');  // '/home' 경로로 이동
  };

  const goBack = () => {
    history.goBack();  // 이전 페이지로 이동
  };

  const replacePage = () => {
    history.replace('/login');  // '/login'으로 이동하며 히스토리 교체
  };

  return (
    <div>
      <button onClick={goToHome}>Go to Home</button>
      <button onClick={goBack}>Go Back</button>
      <button onClick={replacePage}>Replace with Login</button>
    </div>
  );
}

 

useHistory는 React Router v6부터 useNavigate로 대체되어 더 이상 사용되지 않는다.

 

⑦ Navigate 컴포넌트

개념

• 주어진 경로로 사용자를 자동으로 리디렉션하는 컴포넌트
  • 페이지를 프로그래밍적으로 이동시키기 위한 컴포넌트
• 주로 특정 조건이 만족되었을 때 자동으로 다른 경로로 리디렉션하고 싶을 때 사용한다.
• 예를 들어, 로그인 상태에 따라 사용자를 대시보드 페이지로 이동시키거나, 특정 페이지에서 다른 페이지로 리디렉션할 때 사용한다.
• 다음과 같은 @props@를 지정할 수 있다.
  • @to@ : 이동할 경로 지정 (문자열 형식)
  • @replace@
    • 기본값 : @false@
    • @true@로 설정하면 현재 경로를 히스토리에서 대체하여 뒤로 가기를 통해 이전 페이지로 돌아갈 수 없게 한다.
  • @state@ : 이동 시 전달할 상태 객체

 

예제 코드

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isLoggedIn }) {
  return isLoggedIn ? (
    <h1>Welcome to the protected page!</h1>
  ) : (
    <Navigate to="/login" replace={true} />
  );
}

 

참고 사이트

useNavigate | React Router

useNavigation | React Router

redirect | React Router

useLocation | React Router

useParams | React Router

React Router: Declarative Routing for React

Navigate | React Router