[React] Link 컴포넌트 이해하기

728x90

Link 컴포넌트 이해하기

Link 컴포넌트란?
Link 사용방법

Link 컴포넌트란?

Link 컴포넌트란 React에서 사용하는 <a> 태그라고 설명할 수 있습니다. <a> 태그의 경우는 href로 지정한 주소로 이동을 하기 때문에 새로고침이 일어나지만 <Link>의 경우는 주소로 이동하여 전체를 새로고침 하는 것이 아니라 필요한 부분만 재 랜더링 하도록 하는 컴포넌트입니다. <a> 태그에서는 href를 통하여 이동하였다면 <Link>는 to를 이용하여 이동을 한다는 것이 특징입니다. Link를 사용하게 된다면 필요한 부분만 재 랜더링 하므로 속도 향상에 도움이 됩니다.

Link 사용 방법

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" component={<div>home입니다.</div>} />
        <Route path="/category" component={<div>category입니다.</div>} />
        <Route path="/search" component={<div>search입니다.</div>} />
      </Routes>
      <Link to="/home">home 컴포넌트 띄우기</Link>
      <Link to="/category">category 컴포넌트 띄우기</Link>
      <Link to="/search">search 컴포넌트 띄우기</Link>
    </BrowserRouter>
  );
}

Link를 사용하기 이전에 useNavigate를 이용하는 것처럼 Routes와 Route를 사용할 수 있게 BrowserRouter로 상위 컴포넌트를 감싸줍니다. 그 후 Routes와 Route를 이용해서 경로를 나누어줍니다.

그리고 Link 컴포넌트를 작성하고 to를 이용하여 누르면 어디로 이동할지 경로를 입력해주시면 됩니다.

아래의 예시 사진을 보시면 Link를 누르면 주소 뒤에 to에 작성한 내용이 생기는 것을 볼 수 있습니다.