리액트에서 화면이동을 위해 사용하는 두 가지 방법과 두 방법의 차이점에 대해 알아보도록 하겠습니다!

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;

• Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법입니다.
• 클릭 시 바로 이동하는 로직 구현 시에 사용 용이
• react-router-dom 에서 제공하는 Link 컴포넌트는 DOM 에서 a 태그로 변환이 됩니다.
• 이런 a 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동을 시켜줍니다.
  • a 태그와 Link 차이
    • a : 외부 프로젝트로 이동하는 경우
    • Link : 프로젝트 내에서 페이지 전환하는 경우

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 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있습니다.
• Link와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 위와 같이 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있습니다.

두 가지 방법 활용법

1. Link

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

2. useNavigate

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