[React] 링크로 페이지들 간에 이동하기

a 태그와 Link 비교

	<a></a>	<Link></Link>
새로고침	O	X
HTTP	O	X
페이지 전환 방법	서버에 HTTP 요청해서 페이지를 전환하고 모든 JS 코드를 다시 로드함	라우트 정의를 확인하여 페이지를 업데이트하고 필요한 부분만 로드함

코드

a 태그

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

function HomePage() {
  return (
    <>
      <h1>My Home Page</h1>
      <p>
        Go to <a fref="/products">the list of products</a>.
      </p>
    </>
  );
}

export default HomePage;

Link

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

function HomePage() {
  return (
    <>
      <h1>My Home Page</h1>
      <p>
        Go to <Link to="/products">the list of products</Link>.
      </p>
    </>
  );
}

export default HomePage;

참고

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript