<React> Link & useNavigate

페이지 전환을 위해 사용하는 두가지 방법의 차이점에 대해 알아보자!

설치
npm install react-router-dom --save

1.Link

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

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

• 클릭 시 바로 이동하는 로직구현에 사용
  ex)상품을 클릭하면 상품상세페이지로 이동이 필요할 때
• a태그와 Link태그의 차이
  * a: 외부 프로젝트로 이동하는 경우
  • Link: 프로젝트 내에서 페이지 전화하는 경우

2.useNavigate

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 (
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>

• 페이지 전환 시 추가로 처리해야하는 로직이 있는 경우 사용
  ex) 회원가입 여부에 따라 페이지 이동이 달라질때
• Link와 다른점은 함수 호출을 통해 페이지를 전환시켜주기 때문에 특정조건을 충족할 경우에 페이지를 이동할 수 있다

🍄 Link의 또 다른 기능
Link는 to로 단순히 경로만 보내주는 것이 아니라 한 화면에서 다른 화면으로
string 또는 state같은 정보들을 보낼 수 있다

//v5
<Link
  to={{
  	pathname:"/home",
    search:"?sort=name",
    state:{ name: coin.name }
  }}
  />

react-router-dom V6부터는 state가 to로 부터 분리되었다

//v6
<Link 
  to={`${coin.id}`} 
  state={{ name: coin.name }}
  />

보낸 정보는 useLocation() 훅을 이용해서 받아올 수 있다