React Library 모음

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

리액트(React) 기반으로 제작된 UI 라이브러리를 조사해 봤습니다. 선정 기준은 현재도 활발하게유지/개발이 진행 되고 있고, 프로덕션에 적용 가능한 라이브러리 위주로 선택 했습니다. 프로토타이핑이나 UI에 약한 분이라면 한번 고려해보시면 좋을것 같네요.

1. Material-UI

 

• Star: 25,561

• Version: 0.18.1

• License: MIT

설명: 리액트 기반 UI 라이브러리 중에 가장 인기 있고, 성숙한 라이브러리 입니다. 구글 머테리얼 디자인 기반으로 제작 되었습니다. 현재 릴리즈 버전은 0.18x이고, 1.x alpha 버전이 개발 중에 있습니다. 하지만, 1.x 버전 부터는 변경되는 컴포넌트 API가 많기 때문에 버전 선택에 신중해야 할 것 같습니다. 1.x 버전은 여기에서 확인 할 수 있습니다. 현재 stable 버전에서는 inline style을 사용하고 있어, 컴포넌트 커스터마이징 하는게 생각보다 쉽지 않습니다. 1.x 버전에서는 스타일링을 jss를 기반으로 변경 했습니다.

2. React Toolbox

 

 

• Star: 6,168

• Version: 2.00-beta6

• License: MIT

설명: 리액트 툴박스(react-toolbox) 역시 머테리얼 디자인을 기본으로 한 UI 라이브러리 입니다. Material-UI와 다른점은 스타일을 CSS Module을 사용하여 테마 적용과 커스터마이징이 더 쉽다는 점 입니다. 하지만, 아무래도 Material UI 보다는 컴포넌트 종류와 예제가 많지 않고, CSS Module을 사용하기 때문에 설정(configuration)이 다소 복잡 하다는 단점이 있습니다.

3. React Bootstrap

 

• Star: 9,790

• Version: 0.31.0

• License: MIT

설명: 웹 UI 라이브러리로 전세계에서 가장 많이 사용되는 Bootstrap을 리액트 기반으로 변경한 라이브러리 입니다. 주의할 점은 이 라이브러리는 Bootstrap 3.x 버전을 기반으로 제작되었습니다. Bootstrap v4 alpha 버전이 적용된 리액트 라이브러리는 아래의 reactstrap을 사용 하셔야 됩니다.

4. reactstrap

• Star: 1,485

• Version: 4.6.1

• License: MIT

설명: 위에서 설명한 react-bootstrap이 Bootstrap 3.x 버전을 적용한 라이브러리라면 이 라이브러리는 Bootstrap 4.x alpha 버전을 적용한 라이브러리 입니다.

5. Blueprint

 

 

• Star: 6,135

• Version: 1.17.1

• License: BSD

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

6. Ant Design

 

• Star: 13,548

• Version: 2.10.1

• License: MIT

설명: 리액트와 타입스크립트(Typescript) 기반으로 제작된 UI라이브러리 입니다. 중국회사에서 오픈소스화한 라이브러리 인데, 깃헙 스타 수에 비해 많이 사용되고 있는 것 같진 않습니다. 문서와 예제는 자세히 되어 있어서 적용 하는데에는 문제는 없어 보입니다.

7. react-materialize

 

• Star: 507

• Version: 0.18.4

• License: MIT

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

8. Grommet

 

 

• Star: 1,838

• Version: 1.4.0

• License: Apache License 2.0

설명: 리액트 기반의 UI 라이브러리 입니다. 조금 생소한 라이브러리 입니다. 저도 이번에 조사하면서 알게 됐는데, 컴포넌트 종류가 다양하고, 무척 깔끔합니다. 또한, 다른 UI 라이브러리엔 포함되지 않는 차트 컴포넌트가 기본으로 제공 되고 있습니다. 독특한 점은 Sketch 파일도 제공하고 있다는 게 눈에 띄네요.

9. Semantic-UI-React

 

• Star: 2,980

• Version: 0.68.3

• License: MIT

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

10. React-Foundation

 

• Star: 247

• Version: 0.7.0

• License: MIT

 

출저 : https://www.vobour.com/%EB%B2%A0%EC%8A%A4%ED%8A%B8-10-%EB%A6%AC%EC%95%A1%ED%8A%B8-ui-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-10-best-react-ui-lib

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

 

좋은 라이브러리들 모음인 것 같아서 공유를 해보았다.