React Link태그 vs a태그

younghyun·2022년 5월 3일
0

react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성.
페이지 이동 기능을 갖고 있는 태그인 a 태그가 있음.

Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않음.
반면, a 태그는 브라우저의 주소를 이동하며 페이지 자체를 새로고침함.

페이지 새로고침 여부는 웹 페이지에서 중요함. 페이지가 새로고침될 경우 현재 렌더링되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링되게 됨. 이렇게 되면 컴포넌트에 설정되어 있는 state 등이 모두 날아감

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

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

출처 : https://firsteast.tistory.com/136

profile
선명한 기억보다 흐릿한 메모

0개의 댓글