⛳️ Route 이동 방법

-> Route로 이동하는 방법은 두 가지가 있다.

1. <Link> 컴포넌트 사용법
2. useNavigate 사용법

-> <Link> 컴포넌트 사용하는 방법

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

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

export default Login;

• react-router-dom 에서 제공하는 <Link /> 컴포넌트는 DOM에서 <a> 로 변환(Compile) 된다.
• <a> 태그와 마찬가지로 <Link /> 컴포넌트도 지정한 경로로 바로 이동시켜주는 기능을 수행함.
• cf) <a> vs <Link />
  • <a> - 외부 사이트로 이동 혹은 페이지가 새로고침 되는 경우
  • <Link /> - 프로젝트 내에서 페이지 전환하는 경우

-> {useNavigate} 구현 방법

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 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동이 가능하다.

🐳 두 가지 방법 활용법

1. <Link />
   • 클릭 시 바로 이동하는 로직 구현 시에 사용한다..
   • ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동
2. useNavigate
   • 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현합니다.
   • ex.) 로그인 버튼 클릭 시
     • Backend API로 데이터(User Info) 전송
     • User Data 인증 / 인가
     • response message
     • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
     • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동