[React] a태그와 Link, useNavigate()의 차이

페이지를 이동하는 HTML a태그와 react-router-dom에서 제공되는 Link 컴포넌트, useNavigate() 훅의 차이점에 대해 알아보자!

---

 

차이점

 

a태그 : 새로고침이 일어난다. 

Link, useNavigate() : 새로고침이 일어나지 않는다.

 

 

새로고침이 무슨 상관 있을까?

 

DB에 실시간으로 값을 저장하지 않는 이상 state값이 초기화 되기 때문

 

 

사용법

npm install react-router-dom

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

const navigate = useNavigate();

{/* a태그 */}
<a href='/cart'>Cart</a>

{/* Link */}
<Link to='/cart'>Cart</Link>

{/* useNavigate() */}
<button onClick={() => navigate('/cart')}Cart</button>
{/* 꼭 button태그 사용하지 않아도 됨, a태그 onClick 이벤트 핸들러에도 사용 가능 */}

---

 

요약

a태그는 새로고침이 일어나기 때문에 React에서는 Link 컴포넌트와 useNavigate() 훅을 사용하는 것이 컴포넌트 간의 상태 유지 및 관리가 용이하겠다.