AntD Menu 'children' Warning

에러 발생 원인

AntD Menu 컴포넌트를 children 형태로 사용할 시 다음 버전에서는 삭제되니 새로운 속성을 사용하라는 warning 에러가 발생한다. 당장은 코드에 문제가 없겠지만 당장 에러가 뜨는게 보기 불편해서 바꿔보기로 했다.

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

---

기존 코드

      <Menu mode='horizontal'>
        <Menu.Item key='title'>
          <Link href='/'>
            <a>노드버드</a>
          </Link>
        </Menu.Item>
        <Menu.Item key='profile'>
          <Link href='/profile'>
            <a>프로필</a>
          </Link>
        </Menu.Item>
        <Menu.Item key='search'>
          <SearchInput />
        </Menu.Item>
        <Menu.Item key='signup'>
          <Link href='/signup'>
            <a>회원가입</a>
          </Link>
        </Menu.Item>
      </Menu>

---

문제 해결

• AntD에서는 성능과 간결한 코드를 위해 items 속성을 추가하고 Menu컴포넌트에 item에 생성할 child menu 객체가 담긴 배열을 넘기는 형태(<Menu items={[...]} />)로 변경됐다고 한다.

  

• AntD에서 권장하는 코드는 아래와 같다.

  • 배열 하나당 하나의 child menu가 생성되며, label에는 Component를 넣을 수 있다.
  • children key를 사용하여 메뉴 내 서브메뉴를 추가할 수도 있다.

  const items = [
    { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
    { label: 'item 2', key: 'item-2' }, // which is required
    {
      label: 'sub menu',
      key: 'submenu',
      children: [{ label: 'item 3', key: 'submenu-item-1' }],
    },
  ];
  return <Menu items={items} />;

---

해결 코드

const items = [
  {
    label: (
      <Link href='/'>
        <a>노드버드</a>
      </Link>
    ),
    key: 'title',
  },
  {
    label: (
      <Link href='/profile'>
        <a>프로필</a>
      </Link>
    ),
    key: 'profile',
  },
  {
    label: <SearchInput />,
    key: 'search',
  },
  {
    label: (
      <Link href='/signup'>
        <a>회원가입</a>
      </Link>
    ),
    key: 'signup',
  },
];


const App = ({children}) => {
  return (
    <div>
      <Menu mode='horizontal' items={items} />
		...	
	</div>
)