[React] 리액트에서 페이지 이동하기 | Link와 useNavigate

 

 

React에서 Link와 useNavigate로 페이지 이동하기

 

오늘은 페이지 이동을 위한 리액트 hook을 알아볼게요 🧐 크게 Link 태그와 useNavigate() 함수가 있습니다. 리액트에서 Link와 useNavigate는 React Router 라이브러리를 사용하여 다른 페이지로 이동하는 데 사용됩니다. 각각의 사용법과 둘의 차이를 공부해 보겠습니다.

 

 

---

 

 

🍊 React Router란?

 

React Router는 React 애플리케이션에서 브라우저 라우팅을 관리하는 라이브러리입니다. 브라우저 라우팅은 주소 표시줄의 URL을 변경하고 해당 URL에 대한 페이지를 렌더링하는 것을 의미합니다. React Router는 주소 표시줄의 URL을 변경할 때 React 컴포넌트를 렌더링하므로, 사용자가 다른 페이지로 이동할 때 애플리케이션이 새로운 페이지를 빠르게 렌더링할 수 있습니다.

 

React Router는 <Link>와 useNavigate와 같은 두 가지 방법으로 다른 페이지로 이동할 수 있습니다.

 

 

 

 

---

 

 

🍊 <Link>

<Link>는 React Router에서 제공하는 컴포넌트로, HTML 앵커 태그(<a>)와 비슷합니다. <Link> 컴포넌트를 사용하면 사용자가 클릭하면 다른 페이지로 이동하게 할 수 있으며, 이 때 주소 표시줄의 URL이 변경됩니다.

 

 

 

🧶 Link 사용해보기

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

function MyComponent() {
  return (
    <Link to="/about">About</Link>
  );
}

위 코드에서 /about은 다른 페이지의 URL입니다. 이렇게 <Link>를 사용하면 사용자가 클릭할 때 React Router가 새로운 페이지로 이동하고, 이전 페이지의 React 컴포넌트를 제거하고 새로운 페이지의 React 컴포넌트를 렌더링합니다.

 

 

---

 

 

🍊 useNavigate

useNavigate는 React Router v6에서 새롭게 추가된 hook입니다. useNavigate를 사용하면 JavaScript 함수 내에서 다른 페이지로 이동할 수 있습니다. useNavigate는 주소 표시줄의 URL을 변경하지 않으며, 페이지 이동만 수행합니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

 

 

 

🧶 useNavigate() 사용해보기

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

function MyComponent() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/about');
  }

  return (
    <button onClick={handleClick}>Go to About page</button>
  );
}

위 코드에서 useNavigate hook을 사용하여 navigate 함수를 생성하고, 이 함수를 클릭 핸들러(handleClick) 내에서 호출하여 /about 페이지로 이동합니다. 이렇게 useNavigate를 사용하면 페이지를 렌더링할 때 주소 표시줄의 URL을 변경하지 않고, 자바스크립트 함수 내에서 페이지 이동을 수행할 수 있습니다.