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

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

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

1. <a>태그 

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

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

 

- 따라서 상태 값이 유지되지 못하고 속도도 저하된다.

- 해당 이유로 페이지를 새로 불러오게 되면 앱이 지니고 있는 상태가 초기화되고,

   렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링을 해야 한다.

   상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다.

<a href="/group-order">
  // 렌더링을 초기화 하고 싶을때
</a>

 

2. Link 컴포넌트

    - 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서

       HTML5 History API를 사용하여 페이지의 주소만 변경!

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

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

<Link to="/cart">
  // 페이지 주소만 변경..
</Link>