CSS라이브러리

* 👩🏻‍💻 Material UI

구글 머테리얼 디자인을 기반으로 제작된 UI 라이브러리

* 👩🏻‍💻 Material UI 장점

• 리액트 기반 UI 라이브러리 중 가장 인기 있고 성숙한 라이브러리
• 지원하는 기능과 디자인이 다양함
• stable 버전에서는 inline style을 사용하고 있어, 컴포넌트 커스터마이징 하는게 생각보다 쉽지 않음

* 👩🏻‍💻 Material UI 단점

• styled-component 사용시 주의
• 비교적 복잡하여 사용하기 위한 학습이 필요

* 👩🏻‍💻 Ant Design

리액트와 타입스크립트(Typescript) 기반으로 제작된 UI 라이브러리
알리바바 그룹의 자회사로 핀테크 기술을 개발하는 Ant Financial에서 제공

* 👩🏻‍💻 Ant Design 장.단점

• material UI보다 비교적 사용하기 편함
• 사이트나 공식 문서 등은 영어도 지원하지만 github issue에서는 중국어가 자주 등장

* 👩🏻‍💻 Chakra UI

Segun Adebayo가 만든 React용 최신 구성 요소 UI 라이브러리

* 👩🏻‍💻 Chakra UI 장점

• 전체 어플리케이션/컴포넌트에 테마 및 다크모드 적용이 쉬움
• 모든 컴포넌트들이 결합해서 사용하는 것을 염두에 두고 개발됨
• 자체적으로 만든 hooks가 다양

* 👩🏻‍💻 Chakra UI 단점

• Chakra 사용 시 h1, button 등 기본 html 태그의 속성이 사라짐
• 아이콘을 제공하나 아이콘 종류가 많진 않음
• Date Picker, Search 등의 기능이 없음

* 👩🏻‍💻 React-Bootstrap

Bootstrap을 리액트 기반으로 변경한 UI 라이브러리

* 👩🏻‍💻 React-Bootstrap 장점

• React의 상태를 사용하여 업데이트하므로 상태를 관리하기가 더 쉬움 (Bootstrap은 DOM의 상태를 직접 조작)
• Bootstrap 테마를 손쉽게 선택할 수 있음

* 👩🏻‍💻 React-Bootstrap 단점

Bootstrap 3.x 버전을 기반으로 제작되어 style이 최신화되어 있지 않음