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

React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을 하지만

jsp혹은 일반 html에서는 <a>태그를 이용해서 페이지 전환을 한다.

 

1. <a>태그 

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

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

 

2. Link 컴포넌트

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

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