[React] 36. 페이지 라우팅 / 페이지 이동

서회정

Mar 10, 2026

Contents

1. 링크 컴포넌트 2. useNavigate 훅

라우팅 설정이 끝난 후 페이지 이동을 하기 위해서는

크게 두 가지 방법을 사용할 수 있다.

react-router-dom에서 제공하고 있는

Link 컴포넌트나 useNavigate 훅을 활용한 방법이다.

먼저 링크 컴포넌트 사용법에 대해 알아보자.

1. 링크 컴포넌트

Link 컴포넌트 사용을 하려면 리액트 라우터 돔에서

Link를 먼저 불러와야한다.


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

다음으로 페이지 이동을 하기 위해 사용자가 클릭하는

요소가 필요한데 이때 Link 컴포넌트를 사용할 수 있다.

그리고 이동하고자 하는 경로는 to속성으로 넣을 수 있다.

Link컴포넌트는 최종적으로는 a태그로 렌더링되기 때문에

a태그 안에 넣을 수 있는 요소는 전부 들어갈 수 있다.


<div>
  <Link to={"/"}>Home</Link>
  <Link to={"/new"}>New</Link>
  <Link to={"/diary"}>Diary</Link>
</div>;

만일 여기서 a태그를 사용하여 페이지 이동을 한다면

클라이언트 사이드 렌더링이 제공되지 않는다.

다음과 같이 나란히 코드를 요소를 배치해두고

프로그램을 실행해 각각 클릭해보자.

Link컴포넌트를 사용한 페이지 이동과 다르게

a태그를 클릭했을 땐 브라우저 자체가 깜빡거리며

html 전체가 리렌더링되는 걸 확인할 수 있다.

따라서 라우터를 사용하는 리액트 앱 내부에서는

a태그를사용하지 않고 Link컴포넌트를 사용해야한다.


<div>
  <Link to={"/"}>Home</Link>
  <Link to={"/new"}>New</Link>
  <Link to={"/diary"}>Diary</Link>
  
  // 잘못된 예시
  <a href="/">Home</a>
  <a href="/new">New</a>
  <a href="/diary">Diary</a>
</div>;

2. useNavigate 훅

다음으로는 useNavigate 훅을 사용하는 방법이다.

함수 실행으로 페이지를 이동해야하는 경우가 있다.

클릭 이벤트 핸들러를 예로 들 수 있다.

이 때 react-router-dom에서 제공하는 커스텀 훅인

useNavigate 를 활용할 수 있다.

먼저 훅을 불러와주자.


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

다음으로 useNavigate 함수를 호출하여

nav라는 변수에 할당한다.

다음으로 이를 실행시킬 이벤트 핸들러를 만들어

내부에서 nav를 호출하고 인수로 이동할 페이지의

경로를 넣어주자.


const nav = useNavigate();

const onClickButton = () => {
  nav("/new");
};

사용자가 버튼을 클릭할 때 함수가 실행되며 페이지가 이동된다.


<button onClick={onClickButton}>New 페이지로 이동</button>