[React] < a >태그 , Link 컴포넌트 차이점

첫 프로젝트에 투입되어 개발하는 도중, 사소한 궁금증이 생겼다.
페이지를 이동시켜 줄 때 사용되는, 굉장히 기본적이지만 <a>태그와 Link 컴포넌트의 차이점에 대해서 알아보자.

< a >

< a href= 'url' />

기존 html을 사용할 때 쓰이던 방법으로 페이지를 새롭게 불러오면서 리액트 앱의 상태들도 초기화되고, 새로 렌더링을 하게 된다. 즉, 브라우저 주소를 이동하고 페이지 자체를 새로고침한다. 따라서 상태 값이 유지되지 못하고 속도도 저하된다.

Link

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

< Link to= 'url' />

HTML5 History API를 사용해서 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다. 필요한 부분만 재렌더링 되고 나머지 데이터는 그대로 유지된 채 재사용되기에 데이터를 필요한 부분만 불러들일 수 있어 속도향상에 도움이 된다.

SPA(Single Page Application) 방식으로 화면을 렌더링하는 프레임워크인 리액트에서는 새롭게 페이지를 불러오는 방식보다는 필요한 부분만 업데이트하는 방식인 Link컴포넌트를 사용하는 것을 권장한다.