React Router로 라우팅 마스터하기 ① - Outlet, Link

웹사이트를 만들다 보면 "홈, 소개, 상품" 등 여러 화면 간 페이지 이동이 필요하다.

사용자가 화면을 매끄럽게 오갈 수 있도록 하는 것이 바로 "라우팅"인데 react-router 라이브러리를 사용하여 기능을 구현할 수 있다.

 

React는 SPA(Single Page Application, 단일 페이지 애플리케이션) 방식으로 동작한다.

일반 웹사이트는 페이지가 이동될 때마다 브라우저가 전체 페이지를 새로고침하며 서버로부터 리소스를 다시 받아온다.

이 과정에서 화면이 잠시 깜빡이거나 로딩 시간이 길어져 사용자 경험이 저하될 수 있다.

하지만 React는 전체 페이지를 새로고침 하는 대신 필요한 부분만 업데이트하고 다시 렌더링 하기 때문에 페이지 전환이 훨씬 빠르고 매끄럽다.

 

여기서 등장한 게 react-router인데, React와 같은 SPA 환경에서 가장 효율적으로 활용할 수 있도록 돕는 도구이다.

react-router는 페이지를 새로고침 하지 않고 URL만 변경하며 해당 컴포넌트만 선택적으로 렌더링함으로써 불필요한 네트워크 요청을 줄이고, 앱의 로딩 속도를 향상시켜 전반적인 성능을 최적화한다.

 

 

 

설치 방법

# 터미널에 명령어 입력
npm install react-router

 

package.json

  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router": "^7.6.2"       # 확인
  },

 

 

 

사용 방법

먼저 createBrowserRouter, RouterProvider을 사용해서 'Home' 페이지를 만들어 텍스트를 출력해 보자

 

App.jsx

import { createBrowserRouter, RouterProvider } from "react-router";
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import './App.css'

const router = createBrowserRouter([
  {
    path: "/",                     // URL 주소
    element: <Root />,             // 보여줄 컴포넌트
    errorElement: <NotFound />,    // 에러가 발생했을 때 보여줄 컴포넌트
  }
])

function App() {
  return (
    <RouterProvider router={router} />
  )
}

export default App

 

Home.jsx

export default function Home() {
  return <div>Hello, Dev World</div>
}

 

실행 화면

아래 화면처럼 실행되었다면 잘 해내고 있는 거다.

실행 화면

 

 

 

다음으로는 Navbar를 만들어 다른 페이지로 이동하는 연습도 해보자(Outlet, Link 사용)

• Outlet: 부모 컴포넌트 안에서 자식 라우트가 렌더링 될 자리를 의미
• Link: 페이지 간 이동을 위한 컴포넌트

 

App.jsx

import { createBrowserRouter, RouterProvider } from "react-router";
import Root from "./pages/Root"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import Videos from "./pages/Videos"
import './App.css'

const router = createBrowserRouter([
  {
    path: "/",                     // URL 주소
    element: <Root />,             // 보여줄 컴포넌트
    errorElement: <NotFound />,    // 에러가 발생했을 때 보여줄 컴포넌트
    children: [
      {
        index: true,               // 해당 경로의 기본 컴포넌트로 사용
        element: <Home />
      },
      {
        path: "/videos",
        element: <Videos />
      },
    ]
  }
])

function App() {
  return (
    <RouterProvider router={router} />
  )
}

export default App

 

Root.jsx

import { Outlet } from 'react-router';
import Navabr from '../components/Navbar';

export default function Root() {
  return (
    <>
      <Navabr />
      <Outlet />
    </>
  )
}

 

Navbar.jsx

import { Link } from 'react-router'

export default function  Navabr() {
  return (
    <nav style={{ display: 'flex', gap: '1rem'}}>
      <Link to="/">Home</Link>
      <Link to="/videos">Videos</Link>
    </nav>
  )
}

 

Videos.jsx

export default function Videos () {
  return <>비디오 페이지 입니다.</>
}

 

실행 화면

실행화면(Home)

실행 화면(Video)

 

 

 

공식 문서 참고

설치

Installation | React Router

Outlet

Outlet | React Router

Link

Navigating | React Router