[React] Link & useNavigate

 

리액트에서는 화면이동을 위해 Link 와 useNavigate 라는 두 가지 방법을 사용한다. 

1. Link

라이브러리 설치

npm install react-router-dom --save​

// Router.js
function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;


// Login.js

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

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

 

첫번째 방법은 Link 컴포넌트를 사용하는 것이다. Link는 상품 리스트에서 상세 페이지 이동 시와 같이 클릭 시 바로 이동하는 로직 구현시에 사용한다. 

a태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동시켜준다. 

a태그와 Link의 차이점은 a태그는 외부 프로젝트로 이동하는 경우 사용하며, Link는 프로젝트 내에서 페이지를 전환하는 경우에 사용한다.

 

 

2. useNavigate

라이브러리 설치

npm install react-router-dom --save

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

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

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

  // 실제 활용 예시
  // 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;

 

두번째 방법은 useNavigate 훅을 사용하는 것이다.

useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.

반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있습니다.

Link와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 위와 같이 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있다.

 

 

정리

1. Link

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

2. useNavigate

• 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
• ex) 로그인 버튼 클릭 시
  • 회원가입 되어 있는 사용자 -> Main 페이지로 이동
  • 회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동