[TIL] react-router의 Link와 a 태그

react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성한다. 하지만 우리는 이미 페이지 이동 기능을 갖고 있는 태그인 a 태그를 알고 있다. 두 기능 사이에는 어떤 차이가 있을까?

 

결론부터 말하면, 페이지 새로고침 여부가 이 2가지의 차이점이다.

 

Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않는다.

반면, a 태그는 브라우저의 주소를 이동하며 페이지 자체를 새로고침한다. 

 

페이지 새로고침 여부는 웹 페이지에서 중요하다. 페이지가 새로고침될 경우 현재 렌더링되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링되게 된다. 이렇게 되면 컴포넌트에 설정되어 있는 state 등이 모두 날아가기 때문이다.[1]

Link 태그를 사용한 경우에는 렌더링된 컴포넌트의 state가 유지되어 SPA로 동작할 수 있지만 a 태그를 사용한 경우는 컴포넌트들이 제거되기 때문에 갖고 있는 state도 초기화되기 때문에 필요한 정보를 제대로 표시할 수 없다.

 

따라서, react-router를 사용하여 routing을 구현했을 때 새로고침이 필요한 경우가 아니라면 Link 태그를 사용하는 것이 좋다.

 

출처

[1]: 벨로퍼트와 함께하는 모던 리액트

1. 프로젝트 준비 및 기본적인 사용법 · GitBook