[React] 35. 페이지 라우팅 / 라우팅 설정하기

서회정

Mar 09, 2026

Contents

1. 리액트 라우터 설치 1. 공식문서 경로 2. 설치 코드 2. 라우터 사용 3. 페이지 나누기 4. 라우트 설정하기 5. 잘못된 요청 잡기 ✅ 라우트 컴포넌트 사용 시 주의사항

1. 리액트 라우터 설치

💡

리액트 앱에서 라우팅을 도와주는 강력한 라이브러리

다양한 기능을 제공하고 있음

1. 공식문서 경로

www.npmjs.com

2. 설치 코드


npm i react-router-dom

packege.json에서 설치된 버전 확인 가능

2. 라우터 사용

먼저 main.jsx에서 라우터를 불러오자.


import { BrowserRouter } from "react-router-dom";

다음으로 전체 컴포넌트를 감싸고있는 App컴포넌트를

감싸는 형태로 BrowserRouter컴포넌트를 만들어준다.


createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

이렇게 라우터로 전체 컴포넌트를 감싸면

리액트 개발자 도구에서 다음과 같은 구조를 확인할 수 있다.

브라우저 라우터가 전체를 감싸는 root컴포넌트가 되고

state로 다양한 주소에 관련된 정보들을 보관하게 된다.

그리고 그렇게 보관된 값들은 아래의 Navigation.Provider와

Location.Provider같은 컨텍스트 객체의 프로바이더 컴포넌트를

이용해서 App컴포넌트의 자손들에게 공급되고 있다.

3. 페이지 나누기

이번 감정일기장 프로젝트에서 필요한 페이지는 다음과 같다.


1. "/" : 모든 일기를 조회하는 home 페이지
2. "/new" : 새로운 일기를 작성하는 New 페이지
3. "/diary" : 일기를 상세히 조회하는 Diary 페이지

먼저, 페이지 역할을 하는 컴포넌트들을 만들기에 앞서

해당 컴포넌트들의 경로인 pages를 만들자.

pages 디렉토리의 경로는 src 바로 아래다.

해당 프로젝트에서 가지는 세 개의 페이지를 만들어주자.

4. 라우트 설정하기

App컴포넌트에서 세 페이지 모두 불러오자.


import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";

그리고 각각 설정된 경로로 요청이 들어왔을 때 알맞게 렌더링

할 수 있도록 라우터 설정을 하기 위해 리액트 라우터 돔에서

Routes, Route 컴포넌트를 불러와주자.


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

다음으로 App컴포넌트의 최상위 태그로 Routes컴포넌트를

설정해주고 바로 아래에 Route컴포넌트를 배치하자.


function App() {
  return (
    <Routes>
      <Route />
    </Routes>
  );
}

그리고 Route의 props로 path와 element를 넣어주자.


function App() {
  return (
    <Routes>
      <Route path="" element={} />
    </Routes>
  );
}

path에는 경로, element에는 해당 경로에서 렌더링할

컴포넌트를 넣어줄 수 있다.

각 페이지의 경로와 컴포넌트를 넣어보자.


<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/new" element={<New />} />
  <Route path="/diary" element={<Diary />} />
</Routes>;

설정한 경로에 따라 컴포넌트가 바뀌어

렌더링 되는 걸 확인할 수 있다.

5. 잘못된 요청 잡기

만약에 설정된 경로가 아닌 다른 경로로 요청하게 되면

콘솔창에서 다음과 같이 해당 경로에 맞는 라우트가 없다는

경고 메세지를 확인할 수 있다.

만일 사용자가 이렇게 설정되지 않은 경로로

요청을 했을 때는 경로를 찾을 수 없다는 내용이

담긴 페이지를 렌더링해줄 수 있도록 페이지를 따로

만들어줄 수 있다.


const Notfound = () => {
  return <div>잘못된 페이지입니다.</div>;
};

export default Notfound;

라우트의 가장 마지막 순서에 와일드카드(*)를 사용하여

위에서 설정한 경로가 아닌 모든 경로에 대한 요청이

있을 때 해당 element를 렌더링 하도록 만들 수 있다.


<Route path="*" element={<Notfound />} />

잘못된 요청을 잡는 익셉션 역할로 사용할 수 있다.

✅ 라우트 컴포넌트 사용 시 주의사항

1. Routes 컴포넌트 안에는 Route 컴포넌트만 사용할 수 있다

Routes 컴포넌트 내부에 Route가 아닌 div나

다른 일반적인 태그를 사용하면 프로그램이 망가질 수 있다.

2. Routes 컴포넌트 외부에 있는 컴포넌트는 모든 페이지에 렌더링된다

Routes 컴포넌트 외부에 컴포넌트를 두면 어떤 경로에서

접속해도 동일하게 해당하는 컴포넌트가 렌더링된다.

따라서 공통적으로 사용되는 footer나 header 요소처럼

의도한게 아니라면 Routes 바깥에 두지 않도록 주의하자!


<>
  <div>헤더</div>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/new" element={<New />} />
    <Route path="/diary" element={<Diary />} />
    <Route path="*" element={<Notfound />} />
  </Routes>
</>;