[React] useLocation을 활용해 사이드(메뉴)바를 현재 주소 기준으로 활성화하기

문제점 인식

- 메뉴탭을 클릭했을 시 강조되는 부분을 useState에 index를 넣어 관리했다.- 하지만 useState를 사용하니 새로고침시 무조건 0번 index인 첫번째 탭이 활성화되는 문제점이 발견되었다.- 때문에 현재 보고있는 페이지를 기준으로 메뉴탭을 활성화하는 방법을 찾게 되었다.

 

react-router-dom 설치

- react 설치- react-router-dom 설치

npm install react react-router-dom

 

useLocation

react-router-dom의 useLocation을 사용하면 현재  URL과 path 값을 비교하여 탭을 활성화해준다.

// App.js

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>
  );
}

// Slidebar.js

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;

// SlidebarItem.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;

 

참고 블로그

이번 글은 아래 블로그의 내용을 참고했으며 직접 적용한 프로젝트는 보안 이슈로 참고 블로그의 코드로 대체하였다.

https://gaemi606.tistory.com/entry/React-react-router-dom%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-sidebar