🙆🏻‍♀️ Antd Menu 업데이트 🙆🏻‍♀️

지금 하는 일은 관리자 사이트가 대부분이라 Antd를 유용하게 사용하고 있다.
이번에 Antd가 버전 5를 앞두면서 Menu 컴포넌트에 변화가 생겼는데...!

4.20.0 이상 버전에서 이전의 메뉴 컴포넌트를 사용하면 콘솔에 다음과 같이 찍힌다.

Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead.

// typescript
import React, { ReactElement, useState } from "react";
import Menu, { MenuProps } from "antd/lib/menu";
import Divider from "antd/lib/divider";

import { Link } from "react-router-dom";

interface Props {}

const menuItems: MenuProps["items"] = [
  {
    label: <Link to="/">홈</Link>,
    key: "home",
  },
  {
    label: <Link to="/a">a 메뉴</Link>,
    key: "a",
  },
  {
    label: <Link to="/b">b 메뉴</Link>,
    key: "b",
  },
  {
    label: <Link to="/c">c 메뉴</Link>,
    key: "c",
  }
];

export default function CommonGnb({}: Props): ReactElement {
  const [current, setCurrent] = useState("home");

  const onMenu: MenuProps["onClick"] = (e) => {
    setCurrent(e.key);
  };

  return (  
    <Menu onClick={onMenu} selectedKeys={[current]} items={menuItems} mode="inline" />
  );
}

• <Menu.Item> 대신에 Menu 컴포넌트에 items 객체를 넘기는 것으로 변경
• onClick 함수로 액티브

별다른 조합 없이 antd 컴포넌트만으로도 구현 가능해졌다.
더 자세한 사항은 사이트에서...!

Ant Design - Menu