230812 ant design을 쓰면서 느낀 점

230812 ant design을 쓰면서 느낀 점

이번 프로젝트에서는 공용 컴포넌트를 따로 만들지 않고 UI 라이브러리를 사용하기로 했다. MUI와 Ant Design에서 고민하던 중 Ant Design의 작은 크기의 Calendar이 마음에 들어 Ant Design을 선택했다.

Ant Design을 사용하기 시작하면서 Button같이 단순한 컴포넌트는 사용하기 어렵지 않았다. 문제는 Select와 같은 복잡한 컴포넌트였다. Ant Design은 선택할 수 있는 값을 options라는 props로 받는다. 반면 MUI는 children을 통해 MenuItem을 받는다. 하위 요소가 노출되어 있는 MUI에 반해 Ant 에서는 볼 수가 없는데, Select 컴포넌트의 Option 요소를 커스텀마이징하려 했을 때 숨겨져 있어 처음에 어떻게 건들여야 하나 의문점이 생긴다.

//Ant Design
<Select
      defaultValue={30}
      options={[
      { value: 10, label: 'Ten' },
      { value: 20, label: 'Twenty' },
      { value: 30, label: 'Thirty' }
      ]}
/>

//MUI
<Select
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>

 

이와 비슷하게 Menu 컴포넌트에서는 getItem()이라는 함수를 통해 데이터의 형식을 잡아놓고 items라는 props를 통해 메뉴의 리스트를 받아서 렌더링한다. 위의 문제와 마찬가지로 렌더링되는 메뉴간의 깊이와 같은 정보를 한 번에 보기 어렵다. 좀 더 선언적이지 못하다는 느낌도 있고, 렌더링 되는 부분이 완전히 감추어져 커스텀마이징하기 조금 어려웠다

 <Menu
      onClick={onClick}
      style={{ width: 256 }}
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      items={items}
    />