TIL) 리액트에서 <a> 태그? Link 컴포넌트?

 

리액트에서는 <a> 태그 대신 Link를  사용해야한다. 

 

이유는 <a>태그의 href로 이동하면 상태값을 잃고 속도도 저하된다고 한다. 

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

 

핵심

<a> 태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 그래서 상태 값이 유지되지 못하고 속도도 저하된다. 

Link 컴포넌트는 브라우저의 주소만 바꾸고 페이지를 새로 불러오지 않는다. 

 

사용 예시

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

...

<Link to='/logout'>log out</Link>

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓