Material-UI AppBar에서 여러 메뉴를 가진 특정 MenuItems에 onClick 기능 할당하는 방법 in React

React를 사용하여 AppBar에 여러 개의 Menu가 있는 경우 onClick 시 어떤 MenuItems가 열리는지 할당하는 방법

React 애플리케이션에서 material-ui를 사용하여 여러 개의 드롭다운 메뉴를 가진 AppBar를 구축할 때, 아이콘을 클릭하면 동일한 MenuItems 세트가 열리는 문제가 발생할 수 있습니다. 이는 당혹스러울 수 있지만 걱정하지 마세요! 이 튜토리얼에서는 클릭한 아이콘에 따라 어떤 MenuItems가 표시되는지 할당하는 과정을 안내해 드리겠습니다.

문제 파악하기

문제는 메뉴 아이콘에 같은 이벤트 핸들러와 상태 변수를 사용하고 있다는 사실에 있습니다. 이로 인해 어떤 메뉴가 열려야 하는지 결정할 때 충돌이 발생합니다. 이를 해결하기 위해 각 메뉴에 대해 별도의 이벤트 핸들러와 상태 변수를 만들어야 합니다.

해결책: 별도의 컴포넌트 생성하기

이 문제를 해결하는 한 가지 방법은 공통 코드를 별도의 컴포넌트로 추출하여 각 메뉴 버튼이 고유한 범위, 이벤트 핸들러 및 상태를 가질 수 있도록 하는 것입니다. 이 접근 방식을 따라 문제를 해결해 보겠습니다.

단계 1: MenuButton 컴포넌트 생성하기

별도의 파일에서 MenuButton이라는 컴포넌트를 생성해 보겠습니다. 이 컴포넌트는 단일 메뉴 버튼의 기능을 캡슐화할 것입니다.

{`import React from 'react';
import { MenuItem, Menu } from 'material-ui';
import { IconButton } from 'material-ui';
import AccountCircle from 'material-ui-icons/AccountCircle';

class MenuButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      anchorEl: null
    };
  }

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);
    const { iconType, menuItems } = this.props;

    return (
      <div>
        <IconButton
          aria-owns={open ? 'menu-appbar' : null}
          aria-haspopup="true"
          onClick={this.handleMenu}
          color="inherit"
        >
          {React.createElement(iconType)}
        </IconButton>
        <Menu
          id="menu-appbar"
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={open}
          onClose={this.handleClose}
        >
          {menuItems.map((item, index) => (
            <MenuItem
              key={index}
              onClick={this.handleClose}
            >
              {item}
            </MenuItem>
          ))}
        </Menu>
      </div>
    );
  }
}

export default MenuButton;
`}

MenuButton 컴포넌트는 두 개의 props인 iconType과 menuItems를 가져옵니다. iconType props는 메뉴 버튼으로 렌더링될 아이콘 컴포넌트이고, menuItems props는 메뉴에 표시될 항목의 배열입니다.

단계 2: 메뉴 버튼 구현하기

메인 컴포넌트에서 MenuButton 컴포넌트를 가져와서 원하는 메뉴 버튼을 생성합니다.

{`import React from 'react';
import MenuButton from './MenuButton';
import ViewListIcon from 'material-ui-icons/ViewList';
import PeopleIcon from 'material-ui-icons/People';

const Header = () => {
  return (
    <div>
      <MenuButton
        iconType={ViewListIcon}
        menuItems={['List 생성', 'List 1', 'List 2']}
      />
      <MenuButton
        iconType={PeopleIcon}
        menuItems={['프로필', '사용자 관리', '로그아웃']}
      />
      // 나머지 AppBar 코드...
    </div>
  );
};

export default Header;
`}

이 Header 컴포넌트에서는 두 개의 MenuButton 컴포넌트 인스턴스를 사용합니다. 각 인스턴스는 적절한 아이콘 유형과 메뉴 항목을 props로 받습니다.

결론

각 메뉴 버튼에 대해 별도의 컴포넌트를 생성함으로써 각 메뉴마다 고유한 이벤트 핸들러와 상태 변수를 보장합니다. 이로 인해 아이콘을 클릭할 때 동일한 MenuItems 세트가 표시되는 문제가 해결됩니다. 이제 메뉴 버튼을 클릭하면 해당하는 MenuItems만 표시됩니다.

이 해결책을 앱에 구현하고 필요에 맞게 사용자 정의하십시오. 즐거운 코딩하세요!

참고 자료 : 

reactjs