useNavigate & Link

리액트를 사용하게 되면 SPA(single page application)을 사용하게 됩니다.
한개의 웹페이지 안에서 여러개의 페이지를 보여줘야하기 때문에 다른페이지를 보여주고 싶을 때는 Routing을 사용해야합니다.
이러한 Routing을 사용하는 방법에는 useNavigate 와 Link가 있습니다.

1. useNavigate

useNavigate를 사용하기 위해서는
npm install react-router-dom --save을 통해 react routing을 설치해줘야한다.

1) useNavigate 활용 예시

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

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

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

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

export default Login;

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다.
• 해당 함수를 navigate 라는 변수에 저장합니다.
• navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있습니다.

-> 페이지 전환시에 추가로 처리해야되는 로직이 있을 때 사용

2. Link

1) Link 사용 예시

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

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

export default Login;

• Link는 프로젝트내에서 페이지를 이동할 때 사용합니다.

-> 클릭시 바로 페이지가 변환되어야할 때 사용