리액트 React | Link 컴포넌트

 

 

✅ Link 컴포넌트

Link 컴포넌트는 React의 하이퍼링크 생성 컴포넌트로, 다른 페이지로 이동하기 위해 사용한다.

react-router-dom 라이브러리에서 제공하며, 페이지 간 라우팅을 간편하게 처리할 수 있도록 한다. Link 컴포넌트를 사용하면 페이지를 전체적으로 새로고침하지 않고 필요한 부분만 업데이트하기 때문에 데이터 로딩이 줄어든다.

---

개발자 도구에서는 Link 컴포넌트가 <a> 태그로 표시된다.

 

 

💡 <a> 태그와 Link 컴포넌트의 차이점

<a> 태그

<a> 태그는 일반적인 HTML 태그로, 페이지 이동 시 전체 페이지를 다시 렌더링하고 브라우저의 주소를 변경한 후 페이지를 새로고침한다. 이러한 동작 방식으로 인해 상태 값이 유지되지 않으며 성능이 저하된다.

// <a> 태그 사용
function MyComponent() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <a href="/about">소개 페이지로 이동</a>
    </div>
  );
}

---

Link 컴포넌트

Link 컴포넌트를 사용하면 필요한 데이터만 가져오고 불필요한 페이지 전체를 새로 고치지 않아도 된다. 이를 통해 더 나은 성능과 상태 값을 유지한다. 

// Link 컴포넌트 사용 (React Router 예제)
import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <Link to="/about">소개 페이지로 이동</Link>
    </div>
  );
}