{"id":778,"date":"2026-05-18T23:01:52","date_gmt":"2026-05-18T15:01:52","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-router-15\/"},"modified":"2026-05-19T20:26:22","modified_gmt":"2026-05-19T12:26:22","slug":"react-router-15","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-router-15\/","title":{"rendered":"React Router v7 \u2014 SPA \ub77c\uc6b0\ud305 (Ch.15)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 752 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#0891b2;--color-accent:#06b6d4;--color-bg:#f8fafc;--color-bg-card:#fff;--color-text:#0f172a;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#0891b2;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#67e8f9;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#cffafe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#ecfeff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#0e7490;}\n.databox{background:#ecfeff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#cffafe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">React \uad50\uc7ac \u00b7 \uc911\uae09 15\ud3b8<\/span>\n  <h1>React Router v7 \u2014 SPA \ub77c\uc6b0\ud305<\/h1>\n  <p>\ud55c \ud398\uc774\uc9c0\uc5d0 \uc5ec\ub7ec \ud654\uba74. URL \uc774 \ubc14\ub00c\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub9cc \uac08\uc544\ub07c\ub294 SPA \ub77c\uc6b0\ud305\uc758 \uc815\uacf5\ubc95.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-35.jpg\" alt=\"\uc5ec\ub7ec UI \ud654\uba74\uc73c\ub85c \ubd84\uae30\ud558\ub294 \uae38\uacfc \ub0b4\ube44\uac8c\uc774\uc158 \ub9c8\ucee4 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 React Router \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>1\ud3b8\uc5d0\uc11c &#8220;React \ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac, \ub77c\uc6b0\ud130\ub294 \ubcc4\ub3c4&#8221; \ub77c \ud588\ub2e4. \uadf8 \ub77c\uc6b0\ud130\uc758 \ud45c\uc900\uc774 <strong>React Router<\/strong> (npm \ub2e4\uc6b4\ub85c\ub4dc 8M+\/\uc8fc). 2024 \ub144 v7 \uc73c\ub85c \uba54\uc774\uc800 \uc5c5\uadf8\ub808\uc774\ub4dc\ub418\uba70 Remix \uc758 \ub370\uc774\ud130 \ub77c\uc6b0\ud305\uae4c\uc9c0 \ud761\uc218\ud588\ub2e4.<\/p>\n\n<p>\uc774\ubc88 15\ud3b8\uc740 React Router v7 \uc758 \uac00\uc7a5 \ud754\ud55c 5 \ubd80\ud488 (<code>BrowserRouter<\/code>\u00b7<code>Routes<\/code>\u00b7<code>Route<\/code>\u00b7<code>Link<\/code>\u00b7<code>useNavigate<\/code>) + \ub3d9\uc801 \ud30c\ub77c\ubbf8\ud130 + \uc911\ucca9 \ub77c\uc6b0\ud2b8 + \uc778\uc99d \uac00\ub4dc\uae4c\uc9c0. \ud68c\uc0ac \uc0ac\uc774\ud2b8 \ud55c \uac1c \ub9cc\ub4e4 \uc218\uc900\uc758 \ub77c\uc6b0\ud305.<\/p>\n\n<h2>1. \uc14b\uc5c5 \u2014 5\ubd84<\/h2>\n\n<div class=\"code-block\">npm install react-router-dom\n\n\/\/ main.tsx\nimport { BrowserRouter } from &#8216;react-router-dom&#8217;;\nimport App from &#8216;.\/App&#8217;;\n\ncreateRoot(document.getElementById(&#8216;root&#8217;)!).render(\n  &lt;BrowserRouter&gt;\n    &lt;App \/&gt;\n  &lt;\/BrowserRouter&gt;\n);\n\n\/\/ App.tsx\nimport { Routes, Route, Link } from &#8216;react-router-dom&#8217;;\n\nexport default function App() {\n  return (\n    &lt;div&gt;\n      &lt;nav&gt;\n        &lt;Link to=&#8221;\/&#8221;&gt;\ud648&lt;\/Link&gt;\n        &lt;Link to=&#8221;\/about&#8221;&gt;\uc18c\uac1c&lt;\/Link&gt;\n        &lt;Link to=&#8221;\/blog&#8221;&gt;\ube14\ub85c\uadf8&lt;\/Link&gt;\n      &lt;\/nav&gt;\n      &lt;Routes&gt;\n        &lt;Route path=&#8221;\/&#8221; element={&lt;Home \/&gt;} \/&gt;\n        &lt;Route path=&#8221;\/about&#8221; element={&lt;About \/&gt;} \/&gt;\n        &lt;Route path=&#8221;\/blog&#8221; element={&lt;Blog \/&gt;} \/&gt;\n        &lt;Route path=&#8221;*&#8221; element={&lt;NotFound \/&gt;} \/&gt;  {\/* 404 *\/}\n      &lt;\/Routes&gt;\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>5 \ubd80\ud488 \u2014 <code>BrowserRouter<\/code> (HTML5 History API \uc0ac\uc6a9), <code>Routes<\/code> (\ud55c \uc704\uce58\uc5d0\uc11c \ub9e4\uce6d\ub418\ub294 Route \ud558\ub098\ub9cc \ub80c\ub354), <code>Route<\/code> (URL \ud328\ud134 \u2194 \ucef4\ud3ec\ub10c\ud2b8), <code>Link<\/code> (a \ud0dc\uadf8 \ub300\uc6a9, \ud398\uc774\uc9c0 \uc0c8\ub85c\uace0\uce68 0), <code>*<\/code> \uc640\uc77c\ub4dc\uce74\ub4dc (catch-all 404).<\/p>\n\n<div class=\"databox\">\n<strong>\uc65c a \ud0dc\uadf8\uac00 \uc544\ub2cc Link \uc778\uac00<\/strong> \u2014 <code>&lt;a href=\"\/about\"&gt;<\/code> \ub294 \ud398\uc774\uc9c0 \uc804\uccb4 \uc0c8\ub85c\uace0\uce68. <code>&lt;Link to=\"\/about\"&gt;<\/code> \ub294 URL \ub9cc \ubc14\uafb8\uace0 React Router \uac00 <code>&lt;About \/&gt;<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub9cc \uac08\uc544\ub07c\uc6c0. SPA \uc758 \uc989\uc2dc \uc804\ud658 \uacbd\ud5d8\uc740 \uc774 \ud55c \ucef4\ud3ec\ub10c\ud2b8 \ucc28\uc774.\n<\/div>\n\n<h2>2. \ub3d9\uc801 \ud30c\ub77c\ubbf8\ud130 \u2014 :id \u00b7 useParams<\/h2>\n\n<p>\ube14\ub85c\uadf8 \uae00 \uc0c1\uc138 \ud398\uc774\uc9c0\ucc98\ub7fc URL \uc77c\ubd80\uac00 \uac12\uc774 \ub418\ub294 \uacbd\uc6b0. <code>:<\/code> \uc73c\ub85c placeholder.<\/p>\n\n<div class=\"code-block\">\/\/ \ub77c\uc6b0\ud2b8 \uc815\uc758\n&lt;Route path=&#8221;\/blog\/:slug&#8221; element={&lt;BlogPost \/&gt;} \/&gt;\n&lt;Route path=&#8221;\/users\/:userId\/posts\/:postId&#8221; element={&lt;UserPost \/&gt;} \/&gt;\n\n\/\/ \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \uac12 \uc77d\uae30\nimport { useParams } from &#8216;react-router-dom&#8217;;\n\nfunction BlogPost() {\n  const { slug } = useParams();  \/\/ \/blog\/hello-react \u2192 slug = &#8216;hello-react&#8217;\n  return &lt;h1&gt;{slug}&lt;\/h1&gt;;\n}\n\nfunction UserPost() {\n  const { userId, postId } = useParams();\n  return &lt;p&gt;user {userId} \/ post {postId}&lt;\/p&gt;;\n}<\/div>\n\n<p>\uc774\uac8c 11\ud3b8 useEffect \uc758 \ub370\uc774\ud130 fetch \uc640 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uacb0\ud569:<\/p>\n\n<div class=\"code-block\">function BlogPost() {\n  const { slug } = useParams();\n  const { data, loading } = useFetch(`\/api\/posts\/${slug}`);  \/\/ 12\ud3b8 useFetch\n  \/\/ &#8230;\n}<\/div>\n\n<h2>3. \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd navigate \u2014 useNavigate<\/h2>\n\n<p>\ubc84\ud2bc \ud074\ub9ad\u00b7\ud3fc \uc81c\ucd9c \ud6c4 \ub2e4\ub978 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\uc2dc\ud0ac \ub54c. Link \uac00 \uc544\ub2c8\ub77c \ud568\uc218.<\/p>\n\n<div class=\"code-block\">import { useNavigate } from &#8216;react-router-dom&#8217;;\n\nfunction LoginForm() {\n  const navigate = useNavigate();\n\n  const handleSubmit = async (e) =&gt; {\n    e.preventDefault();\n    const success = await login(&#8230;);\n    if (success) {\n      navigate(&#8216;\/dashboard&#8217;);         \/\/ \uc774\ub3d9\n      \/\/ navigate(&#8216;\/dashboard&#8217;, { replace: true });  \/\/ \ub4a4\ub85c\uac00\uae30 \ubc29\uc9c0\n      \/\/ navigate(-1);                  \/\/ \ube0c\ub77c\uc6b0\uc800 \ub4a4\ub85c\n    }\n  };\n  return &lt;form onSubmit={handleSubmit}&gt;&#8230;&lt;\/form&gt;;\n}<\/div>\n\n<h2>4. Nested Routes + \uc778\uc99d \uac00\ub4dc<\/h2>\n\n<p>\ub300\uc2dc\ubcf4\ub4dc\ucc98\ub7fc &#8220;\uacf5\ud1b5 \ub808\uc774\uc544\uc6c3 + \uc548\uc5d0\uc11c \ud654\uba74\ub9cc \ubc14\ub01c&#8221; \ud328\ud134. <strong>Outlet<\/strong> \uc73c\ub85c \uc790\uc2dd \ub77c\uc6b0\ud2b8 \ud45c\uc2dc \uc704\uce58\ub97c \uc9c0\uc815.<\/p>\n\n<div class=\"code-block\">\/\/ App.tsx \u2014 Layout \uc548\uc5d0 \uc790\uc2dd \ub77c\uc6b0\ud2b8\n&lt;Routes&gt;\n  &lt;Route path=&#8221;\/&#8221; element={&lt;PublicLayout \/&gt;}&gt;\n    &lt;Route index element={&lt;Home \/&gt;} \/&gt;        {\/* \/ *\/}\n    &lt;Route path=&#8221;about&#8221; element={&lt;About \/&gt;} \/&gt; {\/* \/about *\/}\n  &lt;\/Route&gt;\n\n  &lt;Route path=&#8221;\/dashboard&#8221; element={&lt;RequireAuth&gt;&lt;DashboardLayout \/&gt;&lt;\/RequireAuth&gt;}&gt;\n    &lt;Route index element={&lt;Overview \/&gt;} \/&gt;           {\/* \/dashboard *\/}\n    &lt;Route path=&#8221;settings&#8221; element={&lt;Settings \/&gt;} \/&gt; {\/* \/dashboard\/settings *\/}\n  &lt;\/Route&gt;\n&lt;\/Routes&gt;\n\n\/\/ PublicLayout \u2014 \uc790\uc2dd \ub77c\uc6b0\ud2b8 \uc704\uce58 \uc9c0\uc815\nimport { Outlet } from &#8216;react-router-dom&#8217;;\nfunction PublicLayout() {\n  return (\n    &lt;&gt;\n      &lt;Header \/&gt;\n      &lt;main&gt;&lt;Outlet \/&gt;&lt;\/main&gt;\n      &lt;Footer \/&gt;\n    &lt;\/&gt;\n  );\n}\n\n\/\/ RequireAuth \u2014 \uc778\uc99d \uac00\ub4dc\nimport { Navigate, useLocation } from &#8216;react-router-dom&#8217;;\nfunction RequireAuth({ children }) {\n  const { user } = useAuth();  \/\/ 13\ud3b8 Context\n  const location = useLocation();\n  if (!user) return &lt;Navigate to=&#8221;\/login&#8221; state={{ from: location }} replace \/&gt;;\n  return children;\n}<\/div>\n\n<p><code>Outlet<\/code> \uc774 \ud575\uc2ec. Layout \ucef4\ud3ec\ub10c\ud2b8\uc758 \uadf8 \uc704\uce58\uc5d0 \uc790\uc2dd Route \uc758 element \uac00 \ub4e4\uc5b4\uac04\ub2e4. <code>RequireAuth<\/code> \ub294 Context (13\ud3b8) \ub85c \uc0ac\uc6a9\uc790 \ud655\uc778 \ud6c4 \ubbf8\ub85c\uadf8\uc778\uc774\uba74 <code>\/login<\/code> \uc73c\ub85c \ub9ac\ub2e4\uc774\ub809\ud2b8. state \ub85c \uc6d0\ub798 \uac00\ub824\ub358 \uc704\uce58\ub97c \ub118\uaca8\uc8fc\uba74 \ub85c\uadf8\uc778 \ud6c4 \ub2e4\uc2dc \uadf8 \ud398\uc774\uc9c0\ub85c \ubcf4\ub0bc \uc218 \uc788\uc74c.<\/p>\n\n<div class=\"warnbox\">\n<strong>Next.js \uc640\uc758 \uad00\uacc4<\/strong> \u2014 Next.js \uc758 App Router \ub294 React Router \uc640 \ub2e4\ub978 \uc2dc\uc2a4\ud15c (\ud30c\uc77c \uae30\ubc18\u00b7\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8 \ud1b5\ud569). React Router \ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc SPA \uc704\uc8fc. Vite + React \uba74 React Router, Next.js \uba74 \uadf8 \ub77c\uc6b0\ud130, \ub458\uc774 \uc11e\uc774\uc9c0\ub294 \uc54a\uc74c. 22\ud3b8 RSC \uc5d0\uc11c \ub2e4\uc2dc \ub4f1\uc7a5.\n<\/div>\n\n<p>15\ud3b8\uc73c\ub85c React \uc758 \ud575\uc2ec \ubd80\ud488\ub4e4\uc774 \ub2e4 \ubaa8\uc600\ub2e4. 16\ud3b8\ubd80\ud130\ub294 \uadf8 \ubd80\ud488\ub4e4\uc774 \ubaa8\uc778 \ud070 \uc571\uc774 \ube60\ub974\uac8c \ub3cc\ub3c4\ub85d \u2014 <strong>\uc131\ub2a5 \ucd5c\uc801\ud654<\/strong>. memo\u00b7useMemo\u00b7useCallback \uc758 \uc815\ud655\ud55c \uc0ac\uc6a9 \uc2dc\uc810.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 16\ud3b8 \u2014 \uc131\ub2a5 \ucd5c\uc801\ud654. memo\u00b7useMemo\u00b7useCallback \uc758 \uc9c4\uc9dc \ub3d9\uc791 + \uc5b8\uc81c \uc4f0\uace0 \uc5b8\uc81c \uc548 \uc4f0\ub294\uc9c0.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-context-13\/\">13\ud3b8 Context<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-usereducer-14\/\">14\ud3b8 useReducer<\/a> \u00b7\n<strong>15\ud3b8 Router<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React Router v7 \u2014 Routes\u00b7Link\u00b7useNavigate, \ub3d9\uc801 \ud30c\ub77c\ubbf8\ud130, nested, protected route. \uad50\uc7ac 15\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":752,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=778"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/778\/revisions"}],"predecessor-version":[{"id":789,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/778\/revisions\/789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/752"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}