[React] useNavigate와 Link to

리액트는 SPA이기 때문에, 하나의 웹 페이지 안에서 여러개의 뷰를 보여줘야 하기 때문에
다른 뷰를 보여줄때는 Routing을 해야 한다.
Routing을 사용하는 방법에는 useNavigate와 Link 가 있다.

1. useNavigate

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

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

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

export default Login;

• useNavigate는 페이지 이동하는 함수를 반환한다.
  따라서 위의 예시에서는 함수를 navigate라는 변수에 할당하여 사용했다.
• navigate의 인자로 Router에서 설정한 path를 넘겨주면 해당결로로 이동한다.
  -> 페이지 전환시에 추가로 처리해야 하는 로직이 있을 때 사용
  예를 들어, 로그인 버튼을 눌렀을때 (정보가 일치하느냐?/안하느냐?)의 로직을 추가해야 한다.

2. Link

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

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

export default Login;

• Link는 프로젝트 내에서 페이지를 이동할 때 사용
  -> 클릭시 바로 페이지가 변환될 때 사용

3. useNavigate에 useHistory 기능도 포함!

  <button onClick={() => navigate(-2)}>
    //Go 2 pages back
  </button>
  <button onClick={() => navigate(-1)}>
    //Go back
  </button>
  <button onClick={() => navigate(1)}>
    //Go forward
  </button>
  <button onClick={() => navigate(2)}>
    //Go 2 pages forward
  </button>

useHistory란 세션기록에 대한 접근 방법과 메서드를 제공한 ㄴ것
뒤로 가기 앞으로 가기 구현할 때 사용하자!