베스트 10 리액트 UI 라이브러리(10 Best React UI Library)

리액트(React) 기반으로 제작된 UI 라이브러리 중에서 활발하게 개발/유지되고 있고, 프로덕션에 적용 가능한 라이브러리 위주로 선택해봤습니다.

Material-UI

리액트 기반 UI 라이브러리 중에 가장 인기 있고, 성숙한 라이브러리입니다. 구글 머테리얼 디자인을 기반으로 제작되었습니다. 오랫동안 꾸준히 개발되었고, 인기가 많다보니 레퍼런스도 다양하고, 커스터마이징도 잘 됩니다. 테마 기반으로 제작 할 수 있고, 여러 가지 서드파티 라이브러리와도 연동해서 사용 할 수 있기 때문에 추천해 드립니다. 타입스크립트, 플로우 타입 모두 지원됩니다.

Ant Design

타입스크립트(Typescript) 기반으로 제작된 라이브러리입니다. Material-UI만큼이나 인기 있죠. 머테리얼, 부트스트랩 기반 UI에 질리셨다면, 한번 사용해보시면 좋을 것 같습니다. 컴포넌트도 다양하고 디자인도 깔끔합니다. 예전에는 중국어만 100% 문서화되어있고, 영어는 번역안되어 있는 부분이 많았습니다. 하지만, 이제는 영문 문서도 완벽하게 지원되니 사용하시는데도 전혀 문제없을 것 같습니다.

Chakra UI

Chakra UI는 오픈된 지 얼마 안 된 라이브러리입니다. 하지만, 최근 중요하게 여겨지는 접근성을 최우선 지원으로 둔 UI 라이브러리로 나온 지 얼마 안됐지만 인기가 많습니다.

React Bootstrap

UI 라이브러리로 전 세계에서 가장 많이 사용되는 Bootstrap을 리액트 기반으로 만든 라이브러리입니다. 이 라이브러리의 경우 0.x 버전에서는 3.x 버전의 부트스트랩 기반으로 만들어졌지만, 1 버전부터는 부트스크랩 4버전을 기반으로 만들어지고 있습니다. 그래서 1.x 버전이 나오기 전에는 부트스트랩 4 버전을 사용하려면 reactstrap 라이브러리를 사용했었는데, 이제는 이 라이브러리에서도 지원하니, 둘 중에 하나를 선택하면 되겠네요.

reactstrap

예전에는 부트스트랩 3.x 버전을 사용하고 싶다면 react-bootstrap을 4.x 버전을 사용하고 싶다면 reactstrap을 사용하면 됐는데, 현재는 두 라이브러리 모두 부트스트랩 4.x 버전을 기반으로 제작되어 있기 때문에 api를 비교해서 둘 중에 하나를 선택하면 될 것 같습니다.

Semantic-UI-React

부트스트랩만큼이나 인기 있는 Semantic UI의 리액트 버전입니다. Semantic UI에 jQuery 의존성을 제거하고 순수하게 리액트로만 개발된 버전입니다.

Blueprint

리액트 기반으로 제작된 UI 툴킷(toolkit) 입니다. 리액트를 기반으로 하는 웹 애플리케이션을 제작하려고 한다면 고려해볼 만한 라이브러리입니다. 다른 UI 라이브러리와 다르게 context menu, hot keys 등의 웹 어플리케이션에서 사용되는 컴포넌트들을 다수 제공하고 있습니다.

Rebass

styled-system 기반으로 제작된 UI 라이브러리입니다. 컴포넌트 종류는 다양하지 않고, 기본적인 UI 컴포넌트만 제공합니다. 하지만, 기본 컴포넌트를 기반으로 확장, 조합하여 다른 컴포넌트를 쉽게 만들 수 있게 API를 제공해 주고 있습니다.

Grommet

컴포넌트 종류가 다양하고, 무척 깔끔합니다. 또한, 보통 UI 라이브러리엔 포함되지 않는 차트 컴포넌트를 기본으로 제공되고 있습니다.

react-materialize

Materialize 라이브러리를 리액트 기반으로 변경한 라이브러리입니다. Materialize의 인기에 비해 리액트 기반으로 제작된 이 라이브러리는 크게 인기가 있어 보이진 않습니다. 아무래도 Material-UI 같은 라이브러리가 있기 때문일 것 같은데, Materialize를 리액트에서 사용하시고 싶은 분이라면 한 번 고려해볼만 합니다.