[TIL] Link & useNavigate

화면이동을 위해 사용하는 두가지 방법에 대해 정리해보자!

1. Link

<Link to="/about">About</Link>

• 클릭했을 때, 바로 이동하는 로직 구현 시 사용이 좋다
• 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다
• 프로젝트 내에서 페이지 전환하는 경우 사용한다

2. useNavigate

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

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


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

• 기본 형식 : navigate(이동할 url, 전달할 인자)
  • 전달할 인자에 navigate("/main", { replace:true }) 형태로 사용 가능
• 함수 호출을 통해 페이지를 이동하기 때문에, 특정 조건을 충족해야 페이지 이동이 가능하다

3. 활용하기

Link

• 클릭 시, 바로 이동하는 로직에 사용
• ex) 메뉴 클릭 시, 해당 페이지로 이동

useNavigate

• 페이지를 전환하되, 추가 처리가 필요할 때 사용
• ex) 로그인 버튼 클릭
  • 가입 된 사용자는 Main 페이지로 이동
  • 가입되지 않은 사용자는 SignUp 페이지 이동