[React] react-router-dom의 Link 컴포넌트와 a 태그 페이지 전환 차이점

React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을
하지만 jsp혹은 일반 html에서는 <a>태그를 이용해서 페이지 전환을 한다.

<a> 태그

• 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버리게 됨

• 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링

Link 컴포넌트

• 페이지를 전환하면, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경

• Link컴포넌트 자체는 <a>태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장

---

그래서 이 둘이 어떤 차이점이 있다고?

그 해답은 바로 페이지 새로 고침의 여부!!! 이다.

Link태그는 브라우저 주소만 바꿀 분 페이지 자체를 새로 고침하지 않기 때문에 렌더링된 컴포넌트의 state가 유지되어 SPA로 동작할 수 있다.

---

[ 정리 ]
<a>태그를 사용하게 되면 리액트 앱이 지니고있는 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게된다. 그러므로 <Link>태그를 이용하는 것이 좋다!!!