React Router

---

1. 중첩 라우트(Nested Routes)란?

• 중첩 라우트는 특정 경로(path)가 다른 라우트의 부모 경로일 때 사용됩니다.
• 부모 라우트의 공통 레이아웃을 렌더링하면서, 하위 라우트가 부모의 특정 영역에 렌더링됩니다.

---

2. 코드 분석

(1) 부모 라우트

jsx

코드 복사

<Route path="/" element={<Layout />}>

• path="/": 루트 경로(/)에 해당합니다.
• element={<Layout />}: 이 경로가 활성화되면, Layout 컴포넌트를 렌더링합니다.
• Layout 컴포넌트 내부에는 중첩된 라우트를 렌더링하기 위해 **<Outlet />**이 필요합니다.

---

(2) 하위 라우트

jsx

코드 복사

<Route index element={<Main />} />

• index: 부모 라우트(/)의 기본 라우트로 동작합니다.
  • URL이 정확히 /일 때만 렌더링됩니다.
• element={<Main />}: 기본 라우트의 컴포넌트로 **Main**을 렌더링합니다.

---

3. 작동 방식

(1) Layout 컴포넌트

• 부모 라우트의 공통 컴포넌트 역할을 합니다.
• Layout 내부에 **<Outlet />**이 있어야, 하위 라우트가 해당 위치에 렌더링됩니다.

jsx

코드 복사

import React from "react"; import { Outlet } from "react-router-dom"; function Layout() { return ( <div> <header>공통 헤더</header> <main> {/* 하위 라우트가 렌더링될 위치 */} <Outlet /> </main> <footer>공통 푸터</footer> </div> ); } export default Layout;

---

(2) URL 매칭

• /: Layout이 렌더링되고, Main이 Layout의 <Outlet /> 위치에 렌더링됩니다.
• /other: 추가적인 하위 라우트를 정의하면 다른 컴포넌트를 렌더링할 수 있습니다.

---

4. 전체 예제 코드

App.js

jsx

코드 복사

import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Layout from "./components/layout/Layout"; import Main from "./components/main/Main"; import About from "./components/about/About"; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Main />} /> {/* 기본 페이지 */} <Route path="about" element={<About />} /> {/* /about 페이지 */} </Route> </Routes> </BrowserRouter> ); } export default App;

Layout.js

jsx

코드 복사

import React from "react"; import { Outlet } from "react-router-dom"; function Layout() { return ( <div> <header>공통 헤더</header> <main> <Outlet /> {/* 하위 라우트 컴포넌트가 렌더링될 위치 */} </main> <footer>공통 푸터</footer> </div> ); } export default Layout;

Main.js

jsx

코드 복사

import React from "react"; function Main() { return <div>메인 페이지</div>; } export default Main;

About.js

jsx

코드 복사

import React from "react"; function About() { return <div>About 페이지</div>; } export default About;

---

5. 동작 설명

1. / (루트 URL)
   • Layout이 렌더링됩니다.
   • Main 컴포넌트가 Layout의 <Outlet /> 위치에 렌더링됩니다.
2. /about
   • Layout이 렌더링됩니다.
   • About 컴포넌트가 Layout의 <Outlet /> 위치에 렌더링됩니다.

---

6. 주의사항

• Layout 컴포넌트에 반드시 **<Outlet />**을 포함해야 중첩 라우트가 렌더링됩니다.
• index는 부모 경로의 기본 컴포넌트를 지정할 때 사용합니다.
• 추가 라우트가 필요하다면 path 속성을 사용해 정의합니다.