[React] Link와 useNavigate의 차이점 알아보기

React에서 페이지 이동을 구현할 때, Link 와 useNavigate 이라는 개념을 사용한다.

하지만 둘의 분명한 차이점이 있는데, 사용하다보니 궁금해져서 정리해보고자한다.

Link

Link는 클릭할 때 바로 이동하는 로직을 구현할 때 사용된다.

 

원래 페이지가 새로고침되면 현재 렌더링되어있는 컴포넌트가 다 사라지고 새로 컴포넌트가 렌더링 되는데,  이때 state 들이 모두 날아간다.

하지만 Link 를 사용한 경우에는 렌더링된 컴포넌트의 state 가 유지되어서 SPA로 동작할 수 있다.

실제 해당 링크로 이동하는 것이 아니라, <Route> 에 지정된 컴포넌트를 렌더링한다.

 

* v6 부터는 Link 로 props 를 전달하지 못한다. (이것때문에 한참 붙잡고 있었다...)

 

예시

예를 들어서 상품 리스트를 클릭했을때, 상품의 상세페이지로 이동할 때 사용하거나

네비게이션바에 있는 메뉴를 클릭해서 그 메뉴 페이지로 이동할 때 사용할 수 있을 것이다.

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

function ProductList() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/product/1">Product 1</Link>
        </li>
        <li>
          <Link to="/product/2">Product 2</Link>
        </li>
      </ul>
    </div>
  );
}

export default ProductList;

 

useNavigate

useNavigate 는 페이지를 전환할 때에 추가로 처리해야하는 로직이 있을 경우 사용한다고 볼 수 있다.

 

v6에서 useHistory에서 useNavigate 으로 바뀌었다.

navigate() 에 숫자를 넘기면 현재 페이지에서 그 해당 숫자만큼 history 이동이 가능하다

특정 url 을 전달하면 페이지 이동이 가능하기도하다.

replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지않는다.

 navigate("../success", { replace: true });

👩🏻‍💻 히스토리를 남기지 않는다의 의미?

기본적으로 useNavigate 는 페이지 전환 시 이전 페이지를 히스토리에 추가하고, 새로운 페이지로 이동한다.
이렇게 하면 사용자가 뒤로가기 버튼을 클릭해을 때 이전 페이지로 돌아갈 수 있다.

하지만 replace 옵션을 사용하면 이전 페이지를 히스토리에 추가하지 않고 새로운 페이지로 이동한다.
이경우 사용자가 뒤로가기 버튼을 클릭해도 이전 페이지로 돌아갈 수 없다.
대신 현재 페이지의 상태를 변경하고 싶을 때 replace 옵션을 사용할 수 있다.

예를 들어, 로그인 후에 로그인 페이지로 돌아가는 것을 방지하려면 replace 옵션을 사용해서 로그인을 한다음에 바로 다른 페이지로 이동할 수 있는 것이다.
replace 옵션을 사용하려면 useNavigate 사용 시 두 번째 인자로 객체를 전달하고 'replace: true' 속성을 설정해주면 된다.

➡️ 결론 : replace: true 옵션을 설정하면 페이지 전환 시에 다른 페이지로 이동하면서 이전 페이지는 히스토리에서 제거된다.

 

예시

예를 들어서 로그인 버튼을 클릭했을 때, 회원가입이 되어있는 사용자는 main 페이지로 이동하고

회원가입이 되어있지 않은 사용자는 signUp 페이지로 이동할 때 사용할 수 있을 것이다.

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

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

  const goToMain = () => {
    navigate("/main");
  };

  const goToSignUp = () => {
    navigate("/signup");
  };

  const checkUser = () => {
    // check if user is valid
    if (validUser) {
      goToMain();
    } else {
      goToSignUp();
    }
  };

  return (
    <div>
      <button onClick={checkUser}>Log in</button>
    </div>
  );
}

export default Login;

 

차이

Link 컴포넌트는 react-router-dom 에서 제공하는 컴포넌트로,

DOM에서 a태그로 변환되며 사용법이 일반적인 a 태그와 비슷하다.

Link 컴포넌트는 a 태그와는 다르게 페이지 전환을 하면서 페이지를 새로고침 하지 않는다.

따라서 더 나은 사용자 경험을 제공한다.

 

useNavigate는 react-router-dom 에서 제공하는 hook 으로, 페이지 이동을 할 수 있는 함수를 반환한다.

반환하는 함수를 변수에 저장하고(ex: const navigate = useNavigate(); ) 해당 변수를 실행할 때에 이동할 경로를 인자로 넘겨주면 해당 경로로 이동할 수 있다.

useNavigate 를 사용하면 Link와 다르게 특정 조건을 충족할 경우에 페이지 이동을 할 수 있게 구현할 수 있다.

 

---

ref: https://stackoverflow.com/questions/71781348/difference-between-link-and-usenavigate-from-react-router-dom

Difference between {Link} and {useNavigate} from 'react-router-dom'

https://velog.io/@seokkitdo/React-Link-useNavigate

[React] Link & useNavigate