[TIL/React] 2023/08/07

Sidebar Nav Menu 🟠

reference: https://www.youtube.com/watch?v=5R9jFHlG6ik&list=WL&index=1

sidebar를 구현하고 싶었다. pedro 형님이 말아주시는 sidebar 강의를 듣고, styled-component 버전으로 코드를 변경했다.

src/App.js 🟢

import React, { useState } from "react";
import Sidebar from "./Components/Sidebar";

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <div>
      <button onClick={toggleSidebar}>Toggle Sidebar</button>
      <Sidebar open={sidebarOpen} onClose={toggleSidebar} />
    </div>
  );
}

export default App;

최상단에서는 1)버튼, 2)Sidebar 컴포넌트를 return한다.

1)버튼에는 onClick으로 'toggleSidebar'라는 함수가 연결되어 있는데, sidebarOpen이라는 boolean 값을 반대로 업데이트하는 기능을 수행한다. 스위치처럼 딸깔딸깍 ㅇㅇ

2)Sidebar 컴포넌트에서는 props로, 1)open이라는 이름의 sidebarOpen이라는 '상태'와 2)onClose라는 이름의 toggleSidebar '함수'를 전달한다.

src/Components/SidebarData.js 🟢

export const SidebarData = [
  {
    title: "Home",
    link: "/home",
  },
  {
    title: "Mailbox",
    link: "/mailbox",
  },
  {
    title: "Analytics",
    link: "/analytics",
  },
  {
    title: "Dashboard",
    link: "/dashboard",
  },
  {
    title: "Images",
    link: "/images",
  },
];

단순히 title과 link로 구성된 data를 return하는 파일이다. Sidebar 컴포넌트에서 요긴하게 쓸 예정이다.

src/Components/Sidebar.js 🟢

import React from "react";
import styled from "styled-components";
import { SidebarData } from "./SidebarData";

const SidebarContainer = styled.div`
  height: 100vh;
  width: ${({ open1 }) => (open1 ? "250px" : "0")};
  background-color: #2f4050;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.5s;
  overflow-x: hidden;
`;

const CloseSidebarButton = styled.button`
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  position: absolute;
  top: 0;
  right: 0;
`;

const SidebarList = styled.ul`
  height: auto;
  padding: 0;
  width: 100%;
`;

const SidebarItem = styled.li`
  width: 100%;
  height: 60px;
  list-style-type: none;
  margin: 0;
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
  align-items: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  &:hover {
    cursor: pointer;
    background-color: #293846;
  }
  ${({ active }) =>
    active &&
    `
    background-color: #293846;
  `}
`;

const SidebarComponent = ({ open, onClose }) => {
  const handleLinkClick = (link) => {
    window.location.pathname = link;
  };

  return (
    <SidebarContainer open1={open}>
      <CloseSidebarButton onClick={onClose}>X</CloseSidebarButton>
      <SidebarList>
        {SidebarData?.map((val, key) => {
          return (
            <SidebarItem
              key={key}
              active={window.location.pathname === val.link}
              onClick={() => handleLinkClick(val.link)}
            >
              {val.title}
            </SidebarItem>
          );
        })}
      </SidebarList>
    </SidebarContainer>
  );
};

export default SidebarComponent;

return 문 이하부터 살펴보자. Sidebar Container 내부에서 1)버튼과 2)리스트를 return하고 있다.

1)onClose는 사실상 toggleSidebar 함수이다. 최초에 클릭했을 때 초기값이 false에서 true로 변경되었으니, 여기서 toggleSidebar의 역할은 다시 true를 false로 변환하는 것이다. 한마디로 sidebar를 끄겠다는 것이다.

2)SidebarData 배열에 있는 데이터를 활용해서 순차적으로 렌더링한다. title이 나오고 active와 onClick이 연결되어 있는 리스트이다.

styled component 부분을 살펴보겠다.

컴포넌트의 껍데기를 담당하는 코드이다.

최초에 open은 사실상 true이고 open1이라는 이름으로 true를 받았을 것이다. width는 250px이 될 것이다. transition을 통해 변화를 감지하고 0.5초간 부드럽게 전환되도록 설정했다.

위 코드에서는 active에 대해 살펴볼 필요가 있다. map을 통해 렌더링되는 sidebar item에는 active로 window.location.pathname === val.link를 설정하고 있다. data로 설정한 링크와 현재 페이지의 pathname이 일치하면(즉 true이면) background를 유지하라는 명령어다.

결과 🔵

회고 🟣

제임스 마커스 바크는 "지식 노동자의 성공은 현재 아는 사실이 아니라 배우는 방식이 좌우한다"라고 언급한 바 있다. 몇 달 전만 해도 문제가 안 풀리면 굉장히 스트레스를 받았다. 요즘은 꽤 나아졌다. 현재 아는 사실이 너무 많아져서? 안타깝지만 여전히 흰 벨트다.

풀리지 않는 문제를 더 작은 단위로 쪼개고 '분할 정복'하는, 나름의 '배우는 방식'을 정립했기에 마음이 편해진 것 같다. 포기하지 않기 위해 발악하는 과정에서 "작은 단위부터 성취하면 된다는", 누가 봐도 뻔한 전략을 습득한 것이다. best practice를 무료로 제공해 주는 유튜브 인도 형님들에게 감사할 따름이다. 🇮🇳