[글또 10기 - 6] 백엔드 개발자가 처음해보는 리액트 프론트엔드 개발 - 사이드바 하위메뉴 기능 분석

하위 메뉴 기능을 개발하였고, 아래와 같이 사이드바 코드가 추가되었다. 이제 코드를 하나씩 분석해보자

// ./component/Sidebar.tsx

'use client'; // 클라이언트 전용 훅(useState)을 사용해야 할 경우 SSR이 아닌 CSR로 동작해야 한다.

import { useState } from 'react';

interface MenuItem {
  label: string;
  href?: string;
  subMenu?: MenuItem[];
}

const menuItems: MenuItem[] = [
  { href: '/pages/about', label: 'onestone' },
  { href: '#', label: '스프링부트' },
  { label: '스프링배치', 
    href: '#',
    subMenu: [
      { label: '5.0.2', href: '/pages/spring_batch/5.0.2' },
    ],
  },
  { href: '#', label: '코틀린' },
  { href: '#', label: '그레이들' },
  { href: '#', label: '깃헙' },
  { href: '#', label: '스프링 카프카' },
  { href: '/pages/glossary', label: '용어 사전 및 규칙' },
];

const Sidebar: React.FC = () => {
  const [openMenus, setOpenMenus] = useState<{ [key: string]: boolean }>({}); // 상태관리

  const toggleMenu = (label: string) => {
    setOpenMenus((prev) => ({
      ...prev,
      [label]: !prev[label],
    }));
  };

  const renderMenu = (items: MenuItem[]) => {
    return (
      <ul className={`${styles.menuList}`}>
        {items.map((item) => (
          <li key={item.label} className={styles.menuItem}>
            {item.subMenu ? (
              <>
                <button
                  onClick={() => toggleMenu(item.label)}
                  className={styles.menuButton}
                  aria-expanded={openMenus[item.label] || false}
                >
                  {item.label}
                </button>
                {openMenus[item.label] && renderMenu(item.subMenu)}
              </>
            ) : (
              <Link href={item.href || '#'}>{item.label}</Link>
            )}
          </li>
        ))}
      </ul>
    );
  };

  return <div className={styles.sidebar}>
    {renderMenu(menuItems)}
    </div>;
};

export default Sidebar;

 

 

 

 

 

1. 상태 관리 Hook - useState

useState는 리액트 16.8부터 추가된 컴포넌트의 상태를 관리하는 Hook이다. useState는 다음과 같이 사용된다.

const [변수, 변수를_변경할_함수] = useState<제네릭>(기본값);

 

 

간단한 예시로 다음과 같이 만들 수 있다.

'use client';

import React, { useState } from 'react';

const Sidebar: React.FC = () => {
  // const [a, b]: [number, React.Dispatch<React.SetStateAction<number>>] = useState<number>(0);
  const [a, b] = useState<number>(0);

  return (
    <>
      <h1>{ a }</h1>
      <button onClick={() => {b(a + 1);}}>증가</button>
    </>
  );
}

 

a는 숫자를 담을 변수고 b는 숫자를 변경할 함수다. 네이밍을 개발자 마음데로 변경 할 수도 있다는 것을 보여주기 위해 a, b로 표기했다.

 

 

 

 

 

아래 코드에서는 openMenus 변수를 setOpenMenus 함수가 변경하는 것으로 이해하면 된다. 변수의 기본값음 객체 {} 이다.

const [openMenus, setOpenMenus] = useState<{ [key: string]: boolean }>({});

 

변수의 타입은 제네릭으로 선언되어 있다. 타입스크립트의 인덱스 시그니처(Index Signature)를 이해해야 분석할 수 있다.

 

 

 

 

 

2. 인덱스 시그니처 - { [key: string]: boolean }

인덱스 시그니처는 { [key : T] : U } 형식이다. 위 코드에서는 { [key: string]: boolean } 로 구현되어 있다.

 

 key는 객체의 키(key)를 의미한다. key: string이므로 key는 문자열 이다. 예를들어, "a", "b", "c" 일 수 있다. value는 객체의 값을 의미한다. [key: string]: boolean이므로 value는 boolean이다. 예를들어 true, false, true이다. 아래 예시 코드를 실행해 보면 이해가 가능할 것이다.

'use client';

const test: { [key: string]: boolean } = {
  "a": true,
  "b": false,
  "c": true
};

const Sidebar: React.FC = () => {
  console.log(`a: ${test["a"]}`);
  console.log(`b: ${test["b"]}`);
  console.log(`c: ${test["c"]}`);
  
  return <div className={styles.sidebar}></div>
}

결과 콘솔 값을 보면, 값이 두 번씩 찍히는데, React.StrictMode가 활성화된 개발 환경에서 리액트가 일부 컴포넌트를 두 번 렌더링하기 때문이다. 개발 모드에서 컴포넌트의 예상치 못한 부작용을 감지하기 위해 추가적으로 렌더링을 두 번 수행하는 기능이므로, 프로덕션 환경에서는 작동하지 않는다.

 

npm run dev가 아니라 npm run build 후 npm run start를 하면 한 번만 찍히는 것을 확인할 수 있다.

 

 

 

 

 

3. 스프레드 연산자(...) - toggleMenu

toggleMenu는 화살표 함수 방식으로 작성되었다. return 값은 없고, openMenu의 값만 변경해준다. 코드를 분석하기 위해서는 스프레드 연산자(...)를 이해해야 한다.

  const toggleMenu = (label: string) => {
    setOpenMenus((prev) => ({
      ...prev,
      [label]: !prev[label],
    }));
  };

 

...prev는 이전 존재했던 객체(openMenus)의 키-값(value)를 유지한다.

[label]: !prev[label], 로 이전 객체(openMenus)의 특정 키를 찾아 값을 반전시켜준다.

 

예를들어, openMenus의 값 세팅이 다음과 같고, '스프링부트' 메뉴를 클릭한다. 그러면, openMenus의 값을 유지(...prev)하고, 객체의 키인 '스프링부트'를 찾아 값인 false에서 true로 변환한다.

// 값 실행 전
const openMenus = [
   'onestone': false, 
   '스프링부트': false, 
   '스프링배치': false, 
   '코틀린': false
]

// 값 실행 후
const openMenus = [
   'onestone': false, // 값유지
   '스프링부트': true, // 변경됨.
   '스프링배치': false, // 값유지
   '코틀린': false // 값유지
]