useCodeusecode logo

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

March 07, 2020

presentation

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

Material-UI

presentation

Github stars Github license npm package npm downloads

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

Ant Design

presentation

Github stars Github license npm package npm downloads

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

Chakra UI

presentation

GitHub stars GitHub license npm package npm downloads

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

React Bootstrap

presentation

GitHub stars GitHub license npm package npm downloads

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

reactstrap

presentation

GitHub stars GitHub license npm package npm downloads

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

Semantic-UI-React

presentation

GitHub stars GitHub license npm package npm downloads

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

Blueprint

presentation

GitHub stars GitHub license npm package npm downloads

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

Rebass

presentation

GitHub stars GitHub license npm package npm downloads

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

Grommet

presentation

GitHub stars GitHub license npm package npm downloads

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

react-materialize

presentation

GitHub stars GitHub license npm package npm downloads

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