Router의 Link와 useNavigater

우선 Router란?

Router는 React 애플리케이션에서 클라이언트 측 라우팅을 처리하여 여러 페이지를 구현할 수 있게 해주는 라이브러리이며, 각 경로에 적절한 컴포넌트를 매핑해 사용자가 특정 URL로 이동할 때 해당 URL에 해당하는 컴포넌트를 렌더링해준다.

 

이러한 router를 공부하면서 Link 컴포넌트와 useNavigater를 이용하여 페이지를 리로드하지 않고 경로를 변경할 수 있는 방법을 알게 되었다.

 

Link와 useNavigate는 모두 React Router 라이브러리에서 제공하는 내비게이션 도구인데 문득 수행 역할은 같은 것 같은데 어떤 부분에서 차이가 있는 것인지가 궁금하여 다시 이 둘을 정의할겸, 차이점까지 정리해보려한다. 

Link

React-Router-Dom 이 제공하는 컴포넌트이다. 주로 사용자가 클릭할 수 있는 내비게이션 링크를 만들 때 사용된다.

이 컴포넌트는 HTML의 <a> 태그와 비슷한 역할을 하지만 (그래서 개발자 도구에는 <a href=#> 로 보인다!) 클라이언트 사이드 라우팅을 위해 사용되기에 페이지를 리로드하지 않고도 URL을 변경하고, 특정 경로로 이동할 수 있다

(<a> 태그는 전체페이지를 재랜더링 함)

사용자가 클릭해서 페이지를 이동하도록 할 때 사용

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

function Example() {
    return (
        <div>
            <h1>Homepage</h1>
            <Link to="/about">Go to About Page</Link>
        </div>
    );
}

useNavigate

useNavigate 훅은 함수형 컴포넌트 내에서 프로그래밍 방식으로 내비게이션을 할 수 있게 해줍니다. 특정 이벤트가 발생했을 경우 (예/ 버튼 클릭, 폼 제출 등) 경로를 변경하고 싶을 때 사용된다. useNavigate는 함수 형태로, 호출 시 지정된 경로로 이동한다. 함수 형태이기에 조건에따라 경로를 설정해 줄수 있는 특징이 있다.

특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용 (ex 로그인 사항등 특정 체크여부가 필요할 때)

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

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

    const handleClick = () => {
        navigate('/about');
    };

    return (
        <div>
            <h1>Homepage</h1>
            <button onClick={handleClick}>Go to About Page</button>
        </div>
    );
}

 

위의 코드처럼 useNavigate는 직접 호출하지 않고 변수로 선언해서 반환된 함수를 호출한다. 그 이유는 useNavigate는 Hook이기 때문에 기본적인 Hook의 규칙을 따라야하기 때문이다.

hook의 규칙
- 컴포넌트 최상단에서만 호출해야한다.
- 다른 조건문, 함수선언문, 반복문 등 중첩된 함수 안에서는 호출 할 수 없다.
- 컴포넌트 내부 함수에서 callback으로도 호출 할 수 없다.
- 함수 컴포넌트에서 호출할 수 있다. (Custom hook에서 예외처리 가능)

 

 

그래서 차이점은?

위에서 정의하면서 어느정도 차이점이 보이겠지만 모아서 정리하자면 사용방식과 적용사례로 구분할 수 있을 것 같다.

 

사용 방식:

Link: 주로 JSX 내에서 직접적으로 사용하여 클릭 가능한 링크를 만듬
useNavigate: 함수형 컴포넌트 내에서 프로그래밍 방식으로 내비게이션을 할 때 사용

 

적용 사례:

Link: 사용자 인터페이스에서 내비게이션 링크를 렌더링할 때 사용
useNavigate: 이벤트 핸들러 또는 조건부 로직 내에서 특정 경로로 이동할 때 사용