라우팅

React Router ／ Next.js

결과 비교

같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.

React Router

코드 비교

코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.

import { MemoryRouter, Routes, Route, Link, useParams, useLocation } from "react-router"

const items = [
  { slug: "apple", name: "사과", price: 1950 },
  { slug: "orange", name: "귤", price: 1300 },
]

// 스타일 (이 데모의 핵심은 아님)
const linkStyle = { color: "#18181b", textDecoration: "none", fontSize: 14 }

function Home() {
  return <h2 style={{ margin: 0, fontSize: 18 }}>홈</h2>
}

function ItemList() {
  return (
    <div>
      <h2 style={{ margin: "0 0 8px", fontSize: 18 }}>상품 목록</h2>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        {items.map((item) => (
          <li key={item.slug} style={{ padding: "8px 0", borderTop: "1px solid #f4f4f5" }}>
            <Link to={"/items/" + item.slug} style={linkStyle}>
              {item.name} →
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

function ItemDetail() {
  // URL의 :slug 부분(예: apple)을 꺼냄
  const { slug } = useParams()
  const item = items.find((i) => i.slug === slug)

  if (!item) {
    return <p>상품을 찾을 수 없습니다</p>
  }

  return (
    <div>
      <h2 style={{ margin: 0, fontSize: 18 }}>{item.name}</h2>
      <p style={{ margin: "4px 0 12px", color: "#71717a" }}>₩{item.price.toLocaleString()}</p>
      <Link to="/items" style={linkStyle}>← 목록으로 돌아가기</Link>
    </div>
  )
}

// 현재 URL을 표시 (데모에서는 주소창이 보이지 않으므로)
function CurrentUrl() {
  const location = useLocation()
  return (
    <span style={{ marginLeft: "auto", padding: "2px 8px", borderRadius: 6, background: "#f4f4f5", color: "#71717a", fontSize: 12, fontFamily: "monospace" }}>
      {location.pathname}
    </span>
  )
}

export default function App() {
  return (
    // MemoryRouter: 데모 안에서만 URL을 전환 (일반 사이트에서는 BrowserRouter를 사용)
    <MemoryRouter>
      <div style={{ maxWidth: 360, margin: "0 auto", border: "1px solid #e4e4e7", borderRadius: 12, fontFamily: "system-ui, sans-serif", overflow: "hidden" }}>
        <nav style={{ display: "flex", alignItems: "center", gap: 16, padding: "10px 16px", borderBottom: "1px solid #f4f4f5" }}>
          <Link to="/" style={linkStyle}>홈</Link>
          <Link to="/items" style={linkStyle}>상품 목록</Link>
          <CurrentUrl />
        </nav>

        <div style={{ padding: 16 }}>
          {/* URL과 화면의 대응표 (path = URL, element = 그때 보여 줄 화면) */}
          <Routes>
            {/* "/"일 때는 홈 */}
            <Route path="/" element={<Home />} />
            {/* "/items"일 때는 상품 목록 */}
            <Route path="/items" element={<ItemList />} />
            {/* "/items/아무거나"일 때는 상품 상세 (:slug = 여기에 무엇이 들어가도 됨) */}
            <Route path="/items/:slug" element={<ItemDetail />} />
          </Routes>
        </div>
      </div>
    </MemoryRouter>
  )
}

Open Sandbox

Next.js로 같은 것을 만들면

app/page.tsx → /

export default function Page() {
  return <h2>홈</h2>
}

app/items/page.tsx → /items

import Link from "next/link"
import { items } from "@/data/items"

export default function Page() {
  return (
    <div>
      <h2>상품 목록</h2>
      <ul>
        {items.map((item) => (
          <li key={item.slug}>
            <Link href={"/items/" + item.slug}>{item.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

app/items/[slug]/page.tsx → /items/apple 등

import Link from "next/link"
import { notFound } from "next/navigation"
import { items } from "@/data/items"

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  // URL의 [slug] 부분(예: apple)을 꺼냄
  const { slug } = await params
  const item = items.find((i) => i.slug === slug)

  if (!item) {
    notFound()
  }

  return (
    <div>
      <h2>{item.name}</h2>
      <p>₩{item.price.toLocaleString()}</p>
      <Link href="/items">← 목록으로 돌아가기</Link>
    </div>
  )
}

비교

2026년 10월 기준

React Router

공식 사이트 ↗

특징

React 앱에 페이지 전환을 더하는 라이브러리입니다. "이 URL이면 이 화면"이라는 대응표를 코드로 씁니다. 페이지 내용은 브라우저에서 만들어집니다

이럴 때 좋아요

기존 React 앱에 페이지를 추가할 때. 로그인 후에 쓰는 관리 화면처럼 검색될 필요가 없는 앱

Next.js

추천공식 사이트 ↗

특징

React로 웹사이트를 만드는 프레임워크입니다. 폴더와 파일 구조가 그대로 URL이 됩니다(app/basics/page.tsx → /basics). 페이지를 서버에서 만들어 보냅니다

이럴 때 좋아요

검색되기를 바라는 사이트를 새로 만들 때: 블로그, 온라인 쇼핑몰, 서비스 소개 페이지 등