리액트에서 사이드바를 쉽게 구현할 수 있는 react-pro-sidebar 사용법 예시를 정리해 보았습니다.
작년엔가 크게 바뀌면서 사용법이 크게 바뀌었는데, 구글링을 해도 내용이 잘 나오지 않아서 그냥 올드 버전을 사용할까 하다가 새로운 버전 사용해 보면서 용례를 메모해 보았습니다.
React Pro Sidebar 설치
npm 설치는 다음과 같습니다.
npm install react-pro-sidebar
npm 상세 사용법은 아래 링크를 확인하시면 됩니다.
React Pro Sidebar 주의 사항
CSS 와 관련된 수정의 경우 희안하게 바로바로 빌드가 적용되지 않았습니다.(vite 사용중임에도)
따라서 수정 후에는 반드시 Ctrl + F5 등으로 혹은 캐시 비우기 및 강력 새로 고침 등을 수행하고 변경점을 확인해 주시기 바랍니다.
React Pro Sidebar 기본 구조
주요 사용 모듈 Import
Menu, MenuItem, Sidebar, Submenu 등 주요 모듈을 import 합니다.
사이드바를 구성하기 위한 요소로는 SideBar, Menu, SubMenu, MenuItem 컴포넌트가 사용되며, 커스터마이징 유틸리티 클래스로 sidebarClasses, menuClasses 가 사용됩니다.
import {
Menu,
MenuItem,
Sidebar,
SubMenu,
sidebarClasses,
menuClasses,
} from "react-pro-sidebar";
React Pro Sidebar – Menu, SubMenu, MenuItem
1레벨 메뉴는 Sidebar > Menu > MenuItem 계층 형태로 만들어 주면 됩니다.
<Sidebar>
<Menu>
<MenuItem
active={true}
onClick={() => setSelectedMenu("first")}
component={<Link to={"/first"} />}
>
{"first"}
</MenuItem>
<MenuItem
active={true}
onClick={() => setSelectedMenu("second")}
component={<Link to={"/second"} />}
>
{"second"}
</MenuItem>
<SubMenu
label="Charts"
icon={<HomeOutlinedIcon />}
> </SubMenu>
</Menu>
</Sidebar>
서브 메뉴 구성
Sub 메뉴의 경우에는 Sidebar > Menu > SubMenu > Menu > MenuItem 으로 구성하면 됩니다.
<SubMenu
label="Charts"
icon={<HomeOutlinedIcon />}
>
<Menu>
<MenuItem
active={true}
onClick={() => setSelectedMenu("sub-third")}
component={<Link to={"/sub-third"} />}
>
{"sub-third"}
</MenuItem>
<MenuItem
active={true}
onClick={() => setSelectedMenu("sub-fourth")}
component={<Link to={"/sub-fourth"} />}
>
{"sub-fourth"}
</MenuItem>
</Menu>
</SubMenu>
위의 코드는 다음과 같이 구현이 됩니다.
사이드바 Collapsed 처리
Collapsed란, 사이드바를 열고 닫고 할 수 있는 옵션을 말합니다.
Collapsed를 관리할 State를 선언한 후 Sidebar 컴포넌트의 collapsed 속성을 사용하면 됩니다.
const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
...
<Sidebar
collapsed={isCollapsed}
rootStyles={{
[`.${sidebarClasses.container}`]: {
backgroundColor: "#fff",
},
[`.${sidebarClasses.root}`]: {},
}}
>
collapsed 값이 true인 경우, 아래와 같이 접히게 됩니다.
SubMenu Open 상태로
만약 서브 하위 메뉴가 열린 상태로 실행되도록 하려면 아래와 같이 DefaultOpen 옵션을 지정하면 됩니다.
<SubMenu
label="Charts"
icon={<HomeOutlinedIcon />}
defaultOpen
>
현재 선택한 메뉴 항목의 Active 정의
현재 선택한 메뉴를 인식할 수 있는 props는 active 입니다.
이를 처리하기 위해서, 선택된 메뉴를 관리하는 State를 (예컨대 selectedMenu) 선언한 후
const [selectedMenu, setSelectedMenu] = useState<string>("Dashboard");
다음과 같이 onClick 이벤트에서 setSeletedMenu를 정의하고, active 여부는 현재 메뉴 key 와 selectedMenu state로 비교하면 됩니다.
<MenuItem
active={selectedMenu **= "first"}
onClick={() => setSelectedMenu("first")}
component={<Link to={"/first"} />}
>
{"first"}
</MenuItem>
Sidebar 배경색 등 스타일 적용하기
react-pro-sidebar 에는 style을 커스터마이징 할 수 있도록 rootStyles props을 제공하고 있습니다.
sidebarClasses는 Sidebar 루트 및 컨테이너에 적용하는 유틸리티 클래스 이고, 그 외에 Submenu, menuItem 는 menuClasses를 활용합니다.
아래의 코드는 sidebarClasses 유틸리티에서 container 식별자를 선택하여 BackgroundColor를 변경하는 사항입니다.
<Sidebar
collapsed={isCollapsed}
rootStyles={{
[`.${sidebarClasses.container}`]: {
backgroundColor: "red",
},
[`.${sidebarClasses.root}`]: {},
}}
>
위의 예시를 보면, sidebarClasses 스타일은 변경되지만, menuItem에는 적용되지 않는 것을 확인할 수 있습니다.
반면, 아래와 같이 적용하면 menuClasses의 subMenuRoot에만 적용되게 됩니다.
<Menu
rootStyles={{
[`.${menuClasses.subMenuRoot}`]: {
backgroundColor: "blue",
},
[`.${menuClasses.menuItemRoot}`]: {},
}}
>
즉, Sidebar 및 MenuItem에는 적용되지 않고 SubMenu에만 적용이 됩니다.
선택한 메뉴아이템(Active)에만 스타일 적용하기
선택된 메뉴아이템에만 스타일을 적용하기 위해서는 menuClasses의 active 에 적용하면 됩니다.
<Menu
rootStyles={{
...
[`.${menuClasses.active}`]: {
color: "red ",
fontWeight: "bold",
},
}}
>
위에서 기술한 스타일링은 아래와 같이 적용됩니다.
Menu Item 및 Sub Menu 꾸미기
MenuItem 속성을 활용해서 아이콘 등을 추가할 수 있습니다.
메뉴 Item에 아이콘 삽입하기
menuItem의 icon props에 icon을 지정해 주면 됩니다. 아래와 같이 간단히 MUI 컴포넌트를 활용할 수 있습니다.
icon={<HomeOutlinedIcon />}
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
...
<SubMenu
icon={<HomeOutlinedIcon />}
defaultOpen
>
<Menu>
<MenuItem
active={selectedMenu **= "sub-third"}
onClick={() => setSelectedMenu("sub-third")}
component={<Link to={"/sub-third"} />}
icon={<HomeOutlinedIcon />}
>
{"sub-third"}
</MenuItem>
위의 코드를 적용하면 아래와 같이 보입니다.
이 정도 사항이면 사이드바를 구성함에 있어 기본적인 사항은 정리된 것으로 생각됩니다.
react-pro-sidebar github는 아래의 링크에서 확인할 수 있습니다.
이상으로 react pro sidebar 사용법에 대해서 알아보았습니다. 리액트에서 사이드바 구성할 때유용하게 사용해 보시기 바랍니다.