[리액트] 중첩 라우팅(Nested Routes)

소요 시간: 10분 조회수: 101

현대 웹 애플리케이션은 사용자에게 다양한 기능과 페이지를 제공하기 위해 복잡한 네비게이션 구조를 필요로 합니다. 이러한 복잡성을 효율적으로 관리하기 위해 중첩된 라우팅(Nested Routing)이라는 개념이 도입되었습니다. 중첩된 라우팅을 통해 우리는 하나의 페이지 내에 여러 하위 페이지를 구성하고, 사용자에게 직관적이고 명확한 네비게이션 경로를 제공할 수 있습니다.

이 글에서는 중첩된 라우팅이 무엇인지, 왜 필요한지, 그리고 이를 어떻게 구현할 수 있는지에 대해 자세히 설명하겠습니다. 실용적인 예제를 통해 중첩된 라우팅이 애플리케이션의 유지보수성과 확장성에 어떻게 기여할 수 있는지 살펴보겠습니다. React와 React Router를 사용하여 중첩된 라우팅을 구현하는 방법을 단계별로 안내하므로, 웹 개발자라면 누구나 쉽게 따라할 수 있을 것입니다.


중첩된 라우팅의 개념

중첩된 라우팅은 한 경로 내에 또 다른 라우트 구조를 두는 방식입니다. 예를 들어, /dashboard 경로 내에 /dashboard/profile, /dashboard/settings 등의 하위 경로를 추가할 수 있습니다. 이렇게 하면 대시보드라는 큰 범주 안에 여러 세부 페이지를 포함할 수 있게 됩니다.


중첩된 라우팅의 필요성

중첩된 라우팅을 사용하면 다음과 같은 장점을 얻을 수 있습니다:


예제 코드

React 애플리케이션에서 중첩된 라우팅을 구현하기 위해 두 코드를 작성해야 하는 파일들을 설명드리겠습니다. 일반적으로 React 프로젝트에서는 컴포넌트를 모듈화하여 관리합니다. 아래는 파일 구조 예시와 함께 각 파일에 어떤 코드를 작성해야 하는지 설명입니다.

파일구조

src/
  ├── components/
  │   ├── About.js
  │   ├── Dashboard.js
  │   ├── Home.js
  │   ├── Profile.js
  │   └── Settings.js
  ├── App.js
  └── index.js

각 파일에 작성해야 할 코드

index.js:

index.js 파일은 React 애플리케이션의 진입점입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

이 파일에서는 ReactDOM.render를 사용하여 App 컴포넌트를 HTML의 루트 요소에 렌더링합니다.

App.js

App.js 파일은 애플리케이션의 주요 라우팅 구조를 설정합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Dashboard from './components/Dashboard';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/dashboard">
          <Dashboard />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Router, Route, Switch, Link를 사용하여 네비게이션 메뉴와 각 경로에 대한 컴포넌트를 정의합니다.

Home.js

Home.js 파일은 홈 페이지 컴포넌트를 정의합니다.

import React from 'react';

function Home() {
  return 
Home Page
;
}

export default Home;

이 컴포넌트는 단순히 "Home Page"라는 제목을 렌더링합니다.

About.js

About.js 파일은 어바웃 페이지 컴포넌트를 정의합니다.

import React from 'react';

function About() {
  return <h2>About Page</h2>;
}

export default About;

이 컴포넌트도 단순히 "About Page"라는 제목을 렌더링합니다.

Dashboard.js

Dashboard.js 파일은 대시보드 페이지와 중첩된 라우팅을 설정합니다.

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Profile from './Profile';
import Settings from './Settings';

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li><Link to="/dashboard/profile">Profile</Link></li>
        <li><Link to="/dashboard/settings">Settings</Link></li>
      </ul>
      <Switch>
        <Route path="/dashboard/profile">
          <Profile />
        </Route>
        <Route path="/dashboard/settings">
          <Settings />
        </Route>
      </Switch>
    </div>
  );
}

export default Dashboard;

대시보드 페이지에는 Profile과 Settings 페이지로 이동할 수 있는 링크가 있으며, 각각의 링크에 대해 별도의 라우트를 설정합니다.

Profile.js

Profile.js 파일은 프로필 페이지 컴포넌트를 정의합니다.

import React from 'react';

function Profile() {
  return <h2>Profile Page</h2>;
}

export default Profile;

이 컴포넌트는 단순히 "Profile Page"라는 제목을 렌더링합니다.

Settings.js

Settings.js 파일은 설정 페이지 컴포넌트를 정의합니다.

import React from 'react';

function Settings() {
  return <h2>Settings Page</h2>;
}

export default Settings;

이 컴포넌트는 단순히 "Settings Page"라는 제목을 렌더링합니다.


요약

중첩된 라우팅을 사용하면 웹 애플리케이션의 네비게이션 구조를 더 체계적으로 관리할 수 있습니다. 예제 코드를 통해 대시보드 내에 여러 하위 페이지를 설정하는 방법을 설명했습니다. 이러한 구조는 대규모 애플리케이션에서 특히 유용하며, 코드의 가독성과 유지보수성을 크게 향상시킵니다.

인기글

리액트 리스트