[React] Link와 useNavigate

 

Link

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

function UsersIndexPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={user.id}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

• react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서a 태그로 변환
• 내부적으로 a 태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 a 태그와 다르게 페이지 자체를 새로고침 하지는 않음 (History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장)
• 페이지가 새로고침 될 경우 현재 렌더링 되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링 → 컴포넌트에 설정되어 있는 state 등이 모두 날아감
• Link를 사용한 경우에는 렌더링 된 컴포넌트의 state가 유지되어 SPA로 동작할 수 있음
• to라는 속성을 통해 이동할 경로를 지정한다는 점은 a 태그와 비슷하지만 실제로 해당 링크로 이동하는 대신 
  <Route>에 지정된 컴포넌트를 렌더링
• v6부터는 Link로 props를 전달하지 못함

 

useNavigate

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

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

• v6에서 useHistory가 useNavigate 훅으로 변경
• navigate() 메소드에 숫자를 넘기면 현재 페이지에서 해당 숫자만큼 히스토리 이동 가능
• 히스토리 이동뿐 아니라 특정 URL을 전달해 페이지 이동 가능 (상대 경로도 가능)
• replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않음

 

차이점

Link

• 클릭 시 바로 이동하는 로직 구현 시에 사용 용이
• ex) 상품 리스트에서 상세 페이지 이동 시

useNavigate

• 함수 호출을 통해 페이지를 이동하기 때문에 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있음 → 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 유용

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

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

  const goToMain = () => {
  	if(response.message === "valid user"){
      navigate('/main');
  	} else {
  		alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
  		navigate('/signup');
  	}
  }

  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;

• ex) 로그인 버튼 클릭 시
  • 회원가입되어 있는 사용자 → Main 페이지로 이동
  • 회원가입이 되어 있지 않은 사용자 → SignUp 페이지로 이동

 

---

📌 참고

 

[React] Link & useNavigate

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

React Router | Docs Home