[ Ant Design ] React + Ant Design + React Router Dom으로 사이드 메뉴 라우팅 구현하기

 

 

이 글에서는 React 프로젝트를 처음부터 셋업 하고,
Ant Design의 메뉴 컴포넌트를 활용해 사이드바 라우팅 UI를 구현하는 과정을 단계별로 정리해 보겠습니다.

 

1. React 프로젝트 생성

---

원하는 위치에 React 파일을 생성합니다.

npx create-react-app 프로젝트이름
cd 프로젝트이름

 

 

2. Ant desgin 설치

---

Ant design의 메뉴를 사용하기 위해서 아래의 명령어로 Ant design을 설치합니다.

npm install antd
# 또는
yarn add antd

 

 

3. React Router 설치

---

페이지 이동 기능을 구현하기 위해 React Router를 설치합니다.

npm install react-router-dom
# 또는
yarn add react-router-dom

 

 

4. 파일 구조 만들기

---

OptionOne.jsx와 OptionsTwo.jsx파일을 생성해 줍니다.

생성해 준 각각의 파일에 코드를 적어줍니다.

src/
├── pages/
│   ├── OptionOne.jsx
│   └── OptionTwo.jsx
└── App.jsx

 

OptionOne.jsx

import React from 'react'

const OptionOne = () => {
  return (
    <div>
      OptionOne
    </div>
  )
}

export default OptionOne

 

OptionTwo.jsx

import React from 'react'

const OptionTwo = () => {
  return (
    <div>
      OptionTwo
    </div>
  )
}

export default OptionTwo

 

 

5. Ant design 메뉴 삽입

---

 Ant design에서 코드를 가지고 옵니다.

 

 

6. App.jsx에서 라우터 연결

---

메뉴 항목의 key에 경로(/optionOne)를 넣으면 라우팅에 바로 쓸 수 있어요.
useNavigate()를 사용하면 클릭 시 해당 경로로 이동시킬 수 있습니다.

import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom'
import OptionOne from './pages/OptionOne';
import OptionTwo from './pages/OptionTwo';

import './App.css'
import { Layout, Menu } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
const { Sider, Content } = Layout;

const Sidebar = () => {
  const navigate = useNavigate();
  const items = [
    {
      key: 'sub1',
      label: 'Navigation One',
      icon: <MailOutlined />,
      children: [
        {
          key: 'g1',
          label: 'Item1',
          type: 'group',
          children: [
            { key: '/optionOne', label: 'Option 1' },
            { key: '/optionTwo', label: 'Option 2' },
          ],
        },
        {
          key: 'g2',
          label: 'Item 2',
          type: 'group',
          children: [
            { key: '3', label: 'Option 3' },
            { key: '4', label: 'Option 4' },
          ],
        },
      ],
    },
    {
      key: 'sub2',
      label: 'Navigation Two',
      icon: <AppstoreOutlined />,
      children: [
        { key: '5', label: 'Option 5' },
        { key: '6', label: 'Option 6' },
        {
          key: 'sub3',
          label: 'Submenu',
          children: [
            { key: '7', label: 'Option 7' },
            { key: '8', label: 'Option 8' },
          ],
        },
      ],
    },
    {
      type: 'divider',
    },
    {
      key: 'sub4',
      label: 'Navigation Three',
      icon: <SettingOutlined />,
      children: [
        { key: '9', label: 'Option 9' },
        { key: '10', label: 'Option 10' },
        { key: '11', label: 'Option 11' },
        { key: '12', label: 'Option 12' },
      ],
    },
    {
      key: 'grp',
      label: 'Group',
      type: 'group',
      children: [
        { key: '13', label: 'Option 13' },
        { key: '14', label: 'Option 14' },
      ],
    },
  ];
  const onClick = e => {
    navigate(e.key);
  };
  return (
    <Menu
      onClick={onClick}
      style={{ width: 256, height: '100vh' }}
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      items={items}
    />
  )
}

function App() {

  return (
    <Router>
      <Layout>
        <Sider height={'100vh'}>
          <Sidebar />
        </Sider>
        <Layout style={{ marginLeft: 60 }}>
          <Content>
            <Routes>
              <Route path="/optionOne" element={<OptionOne />} />
              <Route path="/optionTwo" element={<OptionTwo />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Router>
  )
}

export default App

 

 

7. App.jsx 전체 코드 설명

---

import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom'

• BrowserRouter를 Router라는 이름으로 사용합니다.
• Routes는 여러 개의 Route를 감싸주는 컴포넌트입니다.
• Route는 "어떤 경로에 어떤 컴포넌트를 보여줄지" 정합니다.
• useNavigate는 버튼 클릭처럼 이벤트 발생 시 페이지를 이동할 수 있도록 도와줍니다.

import OptionOne from './pages/OptionOne';
import OptionTwo from './pages/OptionTwo';

• 만든 페이지 컴포넌트를 불러옵니다.
• 각각 /optionOne, /optionTwo 경로에서 보일 컴포넌트입니다.

import { Layout, Menu } from 'antd';

• Layout: 전체 레이아웃을 구성하는 컴포넌트 (예: 사이드바 + 본문)
• Menu: 사이드바 메뉴입니다.

import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

• Ant Design에서 제공하는 아이콘입니다.

 

 레이아웃 컴포넌트 분해

const { Sider, Content } = Layout;

• Layout 컴포넌트에서 Sider와 Content만 뽑아서 사용합니다.
  • Sider: 사이드바 영역
  • Content: 본문 콘텐츠 영역

 

 Sidebar 컴포넌트

const Sidebar = () => {

• 메뉴 전용 컴포넌트를 만들어 재사용하기 쉽게 했습니다.

  const navigate = useNavigate();

• 메뉴를 클릭했을 때 페이지를 이동시키기 위해 navigate 함수를 가져옵니다.

  const items = [
    {
      key: 'sub1',
      label: 'Navigation One',
      icon: <MailOutlined />,
      children: [
        {
          key: 'g1',
          label: 'Item1',
          type: 'group',
          children: [
            { key: '/optionOne', label: 'Option 1' },
            { key: '/optionTwo', label: 'Option 2' },
          ],
        },
        ...
      ],
    },
    ...
  ];

• items는 메뉴에 표시될 데이터입니다.
• label: 메뉴에 표시되는 이름
• key: 메뉴를 클릭했을 때 navigate 할 경로나 고유한 ID
  • key에 라우트 경로(/optionOne)를 넣으면 클릭 시 그 페이지로 이동하게 만들 수 있어요!
• icon: 메뉴 옆에 붙는 아이콘
• children: 하위 메뉴
• type: 'group': 관련 항목끼리 묶을 수 있음 (옵션)

  const onClick = e => {
    navigate(e.key);
  };

• 메뉴 항목을 클릭했을 때 실행되는 함수
• e.key에 들어있는 경로로 이동합니다.

  return (
    <Menu
      onClick={onClick}
      style={{ width: 256, height: '100vh' }}
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      items={items}
    />
  )

• Menu 컴포넌트를 생성합니다.
• style: 사이드바 크기 설정 (너비 256px, 높이 화면 전체)
• defaultSelectedKeys: 처음 선택된 메뉴 항목
• defaultOpenKeys: 처음 열려있는 서브 메뉴
• mode="inline": 메뉴가 세로로 정렬됨
• items={items}: 위에서 정의한 메뉴 데이터 적용

 

App 컴포넌트 (전체 앱 구조)

function App() {

• React의 메인 컴포넌트입니다. 전체 화면 구조를 잡아요.

  return (
    <Router>
      <Layout>

• Router로 전체를 감싸서 라우팅 기능을 활성화합니다.
• Layout은 전체 레이아웃 컨테이너입니다.

        <Sider height={'100vh'}>
          <Sidebar />
        </Sider>

• 왼쪽 사이드바(Sider)에 아까 만든 Sidebar 컴포넌트를 넣습니다.
• height: 100vh: 화면 전체 높이로 설정

        <Layout style={{ marginLeft: 60 }}>
          <Content>
            <Routes>
              <Route path="/optionOne" element={<OptionOne />} />
              <Route path="/optionTwo" element={<OptionTwo />} />
            </Routes>
          </Content>
        </Layout>

• 사이드바 옆의 본문 레이아웃
• Routes: 여러 Route들을 감싸는 컨테이너
• Route: 경로에 따라 보여줄 컴포넌트를 지정
  • /optionOne → <OptionOne />
  • /optionTwo → <OptionTwo />

 

마지막 export

export default App

• App 컴포넌트를 외부에서 사용할 수 있도록 내보냅니다.

 

요약 흐름

1. Sidebar는 메뉴 UI + 라우팅 처리
2. App은 전체 페이지 레이아웃 + 경로에 따라 컴포넌트 보여줌
3. React Router로 경로 설정하고, useNavigate로 경로 이동