[React] Link, useNavigate, & a tag

Link component vs. a tag

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

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

react-router-dom 으로 부터 Link 컴포넌트를 import,
Route 컴포넌트의 path 값 중 일치하는 경로를 찾아감

개발자 도구에서 Link 컴포넌트는 a 태그로 변환됨

• Link 컴포넌트 -> 실제 서버에 요청을 보내지 않고, 단지 url만 변경함. url의 변경을 react-router-dom이 인지하고, 실제 화면에서 바뀌어야 하는 부분만 새로 렌더링 됨. 애플리케이션 내부에서 url을 통해 페이지를 전환할 때 사용
• a 태그 -> 페이지 이동 시 서버로부터 매번 새로운 페이지를 요청해서 받아오게 된다. 전체 화면을 매번 다시 렌더링하기 때문에 비효율적임
  외부 사이트로 이동할 때 유용함

useNavigate

import { useNavigate } from 'react-router-dom';

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

  const goToMain = () => {
  if (response.message === "valid user") {
    navigate("/main");
  } else {
    alert("가입된 회원이 아닙니다.");
    navigate("/signin");
  }
};
  
  return (
  <button className="loginBtn" onClick={goToMain}> 
    로그인
  </button>
  );
};

무조건 경로가 바뀌는 것이 아니라 ex. 로그인이 성공했을 때/ 실패했을 때 이동하는 페이지가 다른 경우 useNavigate 사용

• 함수의 호출 형태로 경로 이동
• 특정 조건에서 경로를 이동