[React] 리액트의 <a>태그 <Link>

Link 컴포넌트

Link 컴포넌트는 React에서 사용하는 <a>태그라고 설명할 수 있다.
<Link>는 주소로 이동하여 전체를 새로고침 하는 것이 아니라 필요한 부분만 재랜더링 하도록 하는 컴포넌트이다.

리액트에서는 페이지 이동 시 <a>태그의 href 대신, <Link>를 사용한다. 왜냐면...

<a>태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다.
리액트는 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 프레임워크.
하나의 HTML 페이지와 애플리케이션에 필요한 JS와 CSS같은 모든 자산을 로드하는 애플리케이션이다.

따라서 페이지를 새로 불러오면 앱이 지니고 있는 상태가 초기화되고, 렌더링 된 컴포넌트도 모두 새로 렌더링 해야 한다.
상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다.
<a>태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다.

반면, Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다.
바뀌어야 하는 화면만 재렌더링 되고 나머지 데이터는 그대로 유지된 채 재사용되어 속도향상에 도움이 된다.

//html
<a href='#' />

// JSX
<Link to='#' />