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

일반적으로

html에서는 a 태그를 이용해서 페이지 전환을 하는 반면,
React에서는 react-router-dom 패키지의 Link 컴포넌트를 이용하여 페이지 전환을 한다.

a 태그는

• 페이지 전환 과정에서 페이지를 새로 불러오는 것이기 때문에 애플리케이션이 가지고 있는 상태를 모두 날려버리게 됨 => 렌더링된 컴포넌트도 모두 사라지고 다시 처음부터 렌더링

되는 반면,

Link 컴포넌트는

• 페이지 전환 시 페이지를 새로 불러오는 것이 아니라 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경해주는 것임
• Link 컴포넌트도 내부적으로는 a 태그로 이루어져있지만, 거기에 페이지 전환 방지 기능이 추가되어있음