첨부파일 https://imweb.eond.com/coding/400623

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

1. Material-UI

presentation


  • 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

presentation


  • Star: 9,790

  • Version: 0.31.0

  • License: MIT

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

4. reactstrap

presentation
  • 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라이브러리와 다르게 treecontext menuhot keys 등의 웹 어플리케이션에서 사용되는 컴포넌트들을 다수 제공 하고 있습니다.

6. Ant Design

presentation
  • Star: 13,548

  • Version: 2.10.1

  • License: MIT

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

7. react-materialize

presentation


  • 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

presentation
  • Star: 2,980

  • Version: 0.68.3

  • License: MIT

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

10. React-Foundation

presentation


  • Star: 247

  • Version: 0.7.0

  • License: MIT

설명: Foundation의 리액트 버전 입니다. Foundation의 인기에 비해 리액트 버전은 인기가 많지는 않은 것 같습니다. 그리고 아직 Foundation의 모든 컴포넌트를 리액트 버전으로 제공하진 않습니다.


※출처 : 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



첨부파일
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 235 articles in 12 / 12 pages
번호 제목 제목 날짜날짜
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018/01/03
공지 jQuery를 배울수 있는 동네들입니다. 2013/08/09
공지 관련 링크 [1] 2010/05/23
15 [프레임워크] [UI Kit] CSS Framework 어떤 것을 사용할 것인가? 출처: https://mobicon.tistory.com/353 [Intelligence Convergence] 파일 2019/03/21
14 [반응형 웹] 모바일 사이드바 만들기 2020/04/10
13 [반응형 웹] 기기별 미디어쿼리 사이즈,모바일 디바이스별 사이즈 파일 2020/05/02
12 Web Fundamentals 2020/05/02
11 [프레임워크] Material design 2020/07/02
10 [Meta] meta viewport 모바일에서 PC 사이즈 그대로 보기 2022/01/09
9 [map] 카카오맵 퍼블리싱 2022/03/31
8 [위지윅에디터] ckeditor5 2022/04/11
7 [svg] SVG PATH EDITOR (코드로 SVG 패스 만들기) 파일 2022/04/21
6 [CSS] css 글자 나누기 2022/05/10
5 [CSS] safari select background glory style 2022/07/14
4 [swiperjs] swiper.js 기본 템플릿 코드 2022/11/27
3 [swiperjs] swiper.js 숫자 페이징 2022/11/28
2 [swiperjs] swiper random shuffle 2022/11/28
1 [CSS] CSS Grid를 배워보는 링크 2023/01/31

해시태그 디렉터리

지금 이순간

오늘의 핫게시물