[React] <a> VS <Link>태그

<a>와 <Link>태그 중 어떤 것을 사용해야 할지 알아보겠습니다

<a href="/">

• 새로 리소스를 다시 다운받음
• 강제적으로 새로고침을 일으켜야할 때 사용

<Link to={"/"}>

• react-router-dom에서 지원
• 기존에 있던 bundle.js에서 데이터 받아오기 때문에 새로고침이 일어나지 않음

---

다음은 HOME-PAGE에서 TODO-PAGE로 이동하는 코드입니다

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

function HomePage() {
const name = "HOME-PAGE";

// todopage로 이동
return (
  <>
    <div>HOME-PAGE입니다</div>
    <a href="/todo"><button>location</button></a>
    <Link to={"/todo"}><button>router</button></Link>
  </>
);
}
export default HomePage;

두 가지 모두 같은 링크로 이동하지만 데이터를 받아오는 방식에서 차이가 있는데요, 자세하게 아래 gif를 통해 보겠습니다

크롬 창에서 cmd+option+i(or F12) ⇨ Network

<a>태그로 감싸준 location 버튼 클릭 시 위의 새로고침 버튼이 움직이며 처음부터 새로 리소스를 다시 다운받는 것을 화면에서 확인할 수 있습니다

<Link>태그로 감싸준 router 를 누르면 새로고침 버튼에는 변화없이 기존에 있던 bundle.js에서 데이터를 받아옵니다

---

사실 이미 bundle.js에 필요한 정보가 다 들어가 있기 때문에, 보통은 a태그를 이용한 것처럼 다시 다운로드를 받아올 필요가 없습니다

그래서 강제로 새로고침을 일으켜야 할 상황이 아니라면, Link태그를 사용하는 것을 권장합니다!