React | react-router-dom을 이용한 sidebar

0. react, react-router-dom install

$ npm install react react-router-dom

 

1. Sidebar.js 컴포넌트 생성

 

menus는 각 사이드바의 메뉴들을 담아놓은 배열. 실제로 사용할 땐 따로 파일을 만들어 import하기로..

map을 이용해 SidebarItem이라는 각각 컴포넌트들을 선언. menu라는 props에 각 object를 담아 전달.

*map이용시 꼭 key값을 넣어주어야 함!

//	src/components/Sidebar.js

import React from "react";
import { Link } from "react-router-dom";

import SidebarItem from "./SidebarItem";

function Sidebar() {

  const menus = [
    { name: "대시보드", path: "/" },
    { name: "회원 관리", path: "/members" },
    { name: "캐시 관리", path: "/cashes" }
  ];

  return (
    <div className="sidebar">
      {menus.map((menu, index) => {
        return (
          <Link to={menu.path} key={index}>
            <SidebarItem
              menu={menu}
            />
          </Link>
        );
      })}
    </div>
  );
}

export default Sidebar;

 

2. SidebarItem.js 컴포넌트 생성

 

기본적으로 div태그에 메뉴 이름만 들어간 상태가 되도록 함.

import React from "react";

function SidebarItem({ menu }) {
  return (
    <div className="sidebar-item">
      <p>{menu.name}</p>
    </div>
  );
}

export default SidebarItem;

 

3. App.js에 Route설정

 

exact설정을 통해 Home컴포넌트가 기본으로 나오도록 함.

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./styles.css";

import Sidebar from "./components/Sidebar";
import Home from "./pages/Home";
import Members from "./pages/Members";
import Cashes from "./pages/Cashes";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Sidebar></Sidebar>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/members" component={Members} />
          <Route path="/cashes" component={Cashes} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

 

 

+

4. 클릭된 메뉴 적용 (새로고침시에도 적용!)

 

아래처럼 현재 클릭된 메뉴가 사이드바에 표시되도록... 처리해보기... 

 

4-1. Sidebar.js수정

 

react-router-dom의 useLocation을 사용해 URL의 path값을 받아 비교해주어 현재 선택된 메뉴인지 확인

import React from "react";
import "../css/sidebar.css";
import { Link, useLocation } from "react-router-dom";

import SidebarItem from "./SidebarItem";

function Sidebar() {

  // URL의 path값을 받아올 수 있다.
  const pathName = useLocation().pathname;

  const menus = [
    { name: "대시보드", path: "/" },
    { name: "회원 관리", path: "/members" },
    { name: "캐시 관리", path: "/cashes" }
  ];

  return (
    <div className="sidebar">
      {menus.map((menu, index) => {
        return (
          <Link to={menu.path} key={index}>
            <SidebarItem
              menu={menu}
              isActive={pathName === menu.path ? true : false}	// 현재 URL pathname과 객체에 담긴 path값 일치 여부 확인
            />
          </Link>
        );
      })}
    </div>
  );
}

export default Sidebar;

 

4-2. SidebarItem.js 수정

 

props로 전달받은 isActive값에 따라 className을 변경해주는 방식.

import React from "react";

function SidebarItem({ menu, isActive }) {
  return isActive === true ? (
    <div className="sidebar-item active">
      <p>{menu.name}</p>
    </div>
  ) : (
    <div className="sidebar-item ">
      <p>{menu.name}</p>
    </div>
  );
}

export default SidebarItem;