React Router에서 navigate와 Link의 차이점 이해하기

React Router를 사용할 때, navigate와 Link 모두 페이지 경로를 이동하는 데 사용됩니다. 하지만 언제, 어떻게 사용하는지에 따라 각기 다른 기능과 목적을 가집니다. 이 글에서는 navigate와 Link의 차이점과 실제 예시를 통해 각각의 용도를 이해해보겠습니다.

1. navigate와 Link의 기본 개념

• navigate: React의 useNavigate 훅을 통해 사용되며, 프로그래밍 방식으로 경로를 변경할 때 사용됩니다. 예를 들어, 특정 조건이 충족되었을 때 자동으로 특정 경로로 이동하게 만들 수 있습니다.
• Link: React Router의 Link 컴포넌트는 사용자 인터페이스 내에서 클릭 가능한 링크를 생성합니다. 사용자가 특정 페이지로 쉽게 이동할 수 있도록 링크 버튼 또는 네비게이션 링크로 사용할 수 있습니다.

2. 사용 예시로 보는 navigate와 Link

예시 1: 로그인 후 리다이렉션(navigate 사용)

사용자가 로그인 버튼을 클릭한 후, 성공적으로 로그인하면 자동으로 홈 화면으로 이동하게 하고 싶다면, navigate를 사용합니다.

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

export default function Login() {
    const navigate = useNavigate();

    const handleLogin = () => {
        // 로그인 로직 처리
        // 로그인 성공 시 홈 화면으로 이동
        navigate("/");
    };

    return (
        <div>
            <h2>Login</h2>
            <button onClick={handleLogin}>Login</button>
        </div>
    );
}

설명: handleLogin 함수 내에서 navigate("/")를 호출하여 프로그래밍적으로 홈 화면으로 이동하게 합니다. 사용자가 로그인 성공 시 자동으로 홈으로 이동하는 등의 조건부 경로 이동에 유용합니다.

 

예시 2: 네비게이션 메뉴에서 Link 사용하기

페이지 상단에 네비게이션 메뉴가 있고, 홈과 프로필 페이지로 이동할 수 있는 링크를 제공하고자 할 때는 Link 컴포넌트를 사용합니다.

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

export default function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/profile">Profile</Link>
        </nav>
    );
}

설명: Link는 사용자가 직접 클릭하여 경로를 이동할 수 있도록 링크를 생성합니다. 네비게이션 바 또는 페이지 내 이동 링크를 만들 때 유용하며, 사용자 인터페이스에서 직접적으로 접근 가능한 링크를 제공합니다.

3. navigate와 Link의 차이점 요약

        기능                     navigate                             Link

사용 위치	조건부 이동, 함수 내부	UI 내의 직접 이동 링크
역할	프로그래밍 방식으로 경로 이동	클릭 가능한 링크 제공
사용 방법	useNavigate 훅 사용	Link 컴포넌트 사용
예시	로그인 성공 시 홈 화면으로 자동 이동	네비게이션 바에서 다른 페이지로 이동

4. 언제 navigate와 Link를 사용해야 할까요?

• navigate는 주로 조건에 따른 경로 변경이 필요할 때 사용합니다. 예를 들어, 로그아웃 시 로그인 페이지로 자동 이동, 인증이 필요한 페이지로 접근 시 로그인 페이지로 리다이렉트 등.
• Link는 사용자가 직접 페이지를 클릭하여 이동할 수 있도록 하고 싶을 때 사용합니다. 일반적인 네비게이션 메뉴, 페이지 내 이동 링크 등이 이에 해당합니다.

정리

navigate와 Link는 React Router에서 매우 중요한 역할을 합니다. 프로그래밍 방식으로 경로를 변경해야 할 때는 navigate를, 네비게이션 바처럼 사용자 인터페이스에서 링크로 사용하려면 Link를 사용하세요.