Antd 사용 리뷰

 

---

antd를 사용하여 프로젝트 하나를 진행하고 있습니다. 사용하면서 느낀 점들을 정리해보겠습니다.

https://ant.design/

Ant Design - The world's second most popular React UI framework

https://github.com/ant-design/ant-design

GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library

 

장점

1. 컴포넌트가 많다

 

Button, Dropdown, Grid는 물로이고 Card, TimePicker, Calendar, Popconfirm 등 별도의 라이브러리로 있어도 될 정도의 컴포넌트들이 기본으로 포함되어있습니다. 컴포넌트별로 다른 라이브러리를 사용하면 dependency가 문제가 되기도하는데 그런 걱정이 없어서 좋습니다.

 

2. 많이 사용한다

 

주간 다운로드 횟수가 1M을 넘어가는 라이브러리입니다.사용하는 사람들이 많기 때문에 버그 리포트도 빠르고, 사용 tip도 검색하여 얻기 쉽습니다.

 

https://www.npmjs.com/package/antd

 

3. design system이 잘 이루어져있다

 

color theme은 물론 size theme도 구현되어있어 다크모드, 모바일 구현이 쉽습니다. 또한 theme editor 페이지가 있어서 theme customize가 쉽습니다. seed를 기반으로 나머지 값들이 유도되는 방식입니다.

https://ant.design/docs/react/customize-theme

Customize Theme - Ant Design

단점

1. GitHub issue에서 중국어를 사용한다.

 

사용법이나 원하는 대로 동작하지 않을 때 GitHub issue에서 키워드로 검색할 때가 있습니다. 그런데 키워드는 검색이 되는데 제목이나 내용이 중국어로 되어있어 번역을 거쳐야하기 때문에 편리하지 않습니다. issue comment도 중국어로 달리고 있어 불편함을 느낍니다. 다른 외국인분들이 영어 사용을 요청하기도 하지만 쉽지 않습니다.

 

2. 컴포넌트 custom 스타일이 고정되어있다.

 

아무래도 Headless UI 라이브러리가 아니기 때문에 스타일을 변경하기 쉽지 않습니다.

예를 들어, Table 컴포넌트에서 "선택" 기능을 넣고 싶은데 체크박스 없이 row를 선택하려면 rowSelection 옵션은 주고, css-in-js로 체크박스 element에 display: none을 주어야합니다. head에서 체크박스 column width를 계산하기 때문에 이 부분도 보정해주어야 합니다.