React Navbar 이동 시 Link vs useNavigate

React로 페이지 코드를 작성하다 보면 가장 자주 쓰는 훅 중에 하나가 바로 useNavigate다. useNavigate는 보통 아래와 같이 navigate함수를 초기화한 후 페이지 이동을 위한 함수를 정의해서 사용자를 특정 경로로 이동시키며, 코드가 직관적이라 구조를 파악하거나 작성하기가 쉽다.

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

const Example = () => {
  const navigate = useNavigate();

  const handleNavigate = (path) => {
    navigate(path);
  };

  return (
    <>
      <button onClick={() => handleNavigate('/home')}>
        홈페이지로 이동
      </button>
    </>
  );
};

export default Example;

 

그러나 Navbar를 설계할 때에는 useNavigate 훅 보다는 Link 컴포넌트를 사용하는 것이 더 바람직하다. 왜냐하면 Navbar에서는 폼 검증이나 상태 업데이트와 같이 특정 조건을 만족시키거나 추가 로직을 수행하는 것이 아니라, 단지 사용자를 특정 경로로 이동시키는 것이 목적이기 때문이다. 이 경우 아래와 같이 Link 컴포넌트를 사용하는 것이 더 직관적이고 효율적이다.

import React from 'react';
import { Link } from "react-router-dom";

const Example = () => {
  return (
    <>
      <Link to="/home">
        <button>홈페이지로 이동</button>
      </Link>
    </>
  );
};

export default Example;

 

이렇게 하면 코드도 더 간결하고 쉬운 방법으로 페이지 이동을 구현할 수 있다.

 

참고로 두 방법 모두 이동 기록이 브라우저 히스토리에 저장되기 때문에 뒤로가기 버튼을 누르면 이전 페이지로 돌아가게 된다. 그러나 로그인 페이지에서 로그인 성공 후 메인 페이지로 이동할 때, 로그인 페이지로 다시 돌아가지 않도록 하고 싶은 경우처럼 특정 페이지를 히스토리에서 제외하고 싶을 때가 있는데, 이런 경우에는 useNavigate 훅에 추가 옵션을 설정하여 구현이 가능하다. 이 내용은 다음 글에서 다루도록 하겠다.