[React] Hooks - useNavigate

useNavigate란 무엇인가?

React의 useNavigate는 react-router-dom에서 제공하는 훅으로 페이지 간의 탐색을 쉽게 구현할 수 있게 도와준다다. 사용자가 특정 이벤트(예: 버튼 클릭)를 트리거하면 해당 이벤트가 발생한 후 다른 경로로 이동해야 할 때 useNavigate를 사용할 수 있다. 예를 들어 로그인 성공 후 대시보드로 이동하거나 특정 데이터를 서버에 전송한 후 결과 페이지로 리다이렉트할 때 유용하다.

왜 useNavigate를 사용할까?
기존의 HTML 방식에서는 페이지 전환 시 전체 페이지가 리로드되지만 React는 싱글 페이지 애플리케이션(SPA) 특성상 페이지 리로드 없이 화면이 부드럽게 전환된다. useNavigate는 이러한 SPA에서 라우팅을 프로그래밍적으로 처리하는 핵심 도구로 쓰인다.

useNavigate 사용예시

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

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

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

  const goBack = () => {
    // 이전 페이지로 이동
    navigate(-1);
  };

  return (
    <div>
      <button onClick={goToHome}>홈으로 이동</button>
      <button onClick={goBack}>뒤로 가기</button>
    </div>
  );
}

 

• useNavigate(): react-router-dom에서 가져온 훅으로, navigate() 함수가 반환된다.
• navigate('/home'): 클릭하면 /home 경로로 이동한다.
• navigate(-1): 브라우저 히스토리에서 이전 페이지로 이동한다. (브라우저의 뒤로 가기 기능과 동일하게 동작)

언제 사용해야 할까?

• 이벤트 기반 탐색
  • 사용자가 버튼을 클릭하거나 폼을 제출했을 때 특정 경로로 이동해야 하는 경우에 사용한다. 예를 들어, 상품 상세 페이지에서 "결제하기" 버튼을 눌렀을 때 결제 페이지로 이동할 수 있다.
• 조건부 탐색
  • 로그인이 필요한 페이지에 접근할 때, 인증 여부를 확인한 후 로그인되지 않은 사용자를 로그인 페이지로 리다이렉트하는 등 조건에 따라 라우팅을 결정해야 할 때 사용한다.
• 내비게이션 상태 관리
  • useNavigate는 탐색할 때 상태를 전달할 수도 있다. 예를 들어, 상태를 넘겨줘야 하는 페이지로 이동할 때 해당 상태를 나중에 useLocation으로 받아와 사용할 수 있다.

navigate('/profile', { state: { userId: 123 } });

이동한 페이지에서는 useLocation()으로 상태를 받아올 수 있다.

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

const Profile = () => {
  const location = useLocation();
  const { userId } = location.state; // 123
  return <div>User ID: {userId}</div>;
};

Link 태그와 차이점

특징	Link 태그	useNavigate
사용 방식	JSX 내에서 <Link to="/path">로 사용	함수 호출 방식으로 navigate('/path') 사용
사용 목적	사용자가 클릭하는 링크로 페이지 이동	이벤트나 조건부로 프로그래밍적 이동
주요 사용 위치	내비게이션 메뉴, 사이드바, 링크 요소	버튼 클릭, 폼 제출, 로그인 후 등 이벤트 처리
동작 방식	자동으로 to 속성에 따른 경로 이동	명시적인 함수 호출로 이동
상태 전달	가능 (state 속성을 통해 데이터 전달 가능)	가능 (navigate 함수로 상태 전달 가능)
브라우저 히스토리	자동으로 히스토리 추가	옵션에 따라 replace로 대체 가능

참고문헌

Guides | React Router