React는 가장 많이 사용되는 기술 중 하나입니다. React를 사용하는 사람은 처음 페이스북으로부터 만들어진 2013년부터 상승 곡선을 그리며 꾸준히 늘어왔고 최근에 이르러서는 그 수가 엄청나게 늘었습니다. 이로 인해 사람들은 직접 코딩한 컴포넌트들을 공유하기 시작하였고 이 글은 공유된 컴포넌트들 중에 인기 있는 11가지를 소개하는 글입니다.
Material-UI
Material-UI는 Github에서 가장 인기있는 React 컴포넌트 라이브러리입니다. 간단하고 가벼우며 Google의 Material Design 사양에 따라 제작되었습니다. 레이아웃, 양식, 탐색, 데이터 표시 및 기타 여러 위젯에 대한 컴포넌트가 존재합니다.
@material-ui/style로 컴포넌트를 스타일링 할 수 있고 CSS-in-JS 솔루션은 빠르고 확장 가능하며 스타일링 된 컴포넌트와 동일한 이점을 제공합니다. Material-UI는 다른 주요 스타일링 솔루션과도 상호 운용이 가능하므로 스타일링을 사용할 필요가 없습니다.
Ant Design
Ant Design은 리엑트 라이브러리를 설계하는 중국 기업으로 이를 사용하는 기업으로 텐센트, 알리바바, 바이두 등이 대표적이다. 라이브러리는 60개 이상의 컴포넌트가 있고 예측 가능한 정적 유형을 가진 TypeScript로 작성됩니다.
Ant Design 라이브러리는 단순한 리엑트 UI 라이브러리라고 볼 수 없습니다. 이는 하나의 디자인 시스템으로 성장, 의미, 확실성, 자연성의 가치를 중심으로 제작되었습니다. Figma UI 키트, 랜딩 페이지 템플릿, 스케치 플러그인 등에 대한 리소스를 살펴보십시오.
Blueprint
Blueprint는 빅 데이터 분석을 전문으로 하는 미국 기술 회사 인 Palantir에서 구축 한 React UI 라이브러리입니다. 그들의 React 라이브러리에는 특히 데스크톱 애플리케이션을 위한 복잡한 데이터 밀도 인터페이스에 최적화된 40개 이상의 컴포넌트가 있습니다.
Blueprint는 TypeScript로 작성되었으며 문서의 모든 코드 샘플도 마찬가지입니다. 라이브러리는 Chrome, Firefox, Safari, IE 11 및 Microsoft Edge를 지원합니다. IE10 이하는 CSS Flexbox 레이아웃에 대한 지원이 없기 때문에 지원되지 않습니다.
Gestalt
Gestalt는 pinterest 설계 언어를 적용하는 일련의 리액트 UI 컴포넌트입니다. 이 라이브러리의 목적은 설계 모범 사례의 공유 라이브러리를 만드는 것이다. 이 라이브러리는 오른쪽에서 왼쪽으로, 국제화 및 다크 모드를 지원합니다.
Gestalt는 교차 플랫폼을 실행하는 자동 설계와 코드 업데이트 때문에 유지보수할 일이 상대적으로 적습니다. 릴리스가 사용 또는 입력 시 변경 사항을 발생시키는 경우 업그레이드 프로세스를 용이하게 하는 코드 모드를 제공합니다.
React Bootstrap
React Bootstrap은 Bootstrap javascript를 대체하는 역할을 한다. 각 구성 요소는 trueReact 구성 요소로 구축되었으므로 jQuery 종속성이 필요하지 않습니다. React Bootstrap은 가장 오래된 리액트 라이브러리 중 하나이며 리액트 자체와 함께 꾸준히 성장해 왔다.
Bootstrap의 그리드 시스템은 레이아웃에 대해 완전히 반응하는 일련의 컨테이너, 행 및 열이 있음을 의미합니다. 배지, 캐러셀, 토스트 및 점보트론을 포함한 수십 가지 구성 요소 중에서 선택할 수 있습니다.
Onsen UI
Onsen UI는 HTML5 하이브리드 및 모바일 웹 앱을 구축하도록 설계된 React 라이브러리이다. 이 구성 요소에는 탭, 사이드 메뉴, 스택 탐색, 목록, 양식 등이 있습니다. 모든 컴포넌트는 iOS와 Android Material Design 지원, 플랫폼을 기반으로 앱의 외관을 바꾸는 자동 스타일링을 갖추고 있습니다.
Onsen은 세 개의 레이어로 구성되어 있다: CSS 컴포넌트, 네이티브 자바스크립트로 작성된 웹 컴포넌트, 리액트(React)와 쉽게 통합될 수 있는 프레임워크 바인딩, Vue와 Angular.
Evergreen
에버그린(Evergin)은 데이터 플랫폼 회사인 세그먼트(Segment)가 개발한 리액트 라이브러리이다. 에버그린은 미래의 요구 사항을 예측할 수는 없지만, 그것들을 준비할 수 있다고 믿습니다. 이것은 새롭고 변화하는 설계 요구사항을 예측하는 시스템을 구축하기 위해 만들어진 라이브러리입니다.
에버그린의 구성 요소에는 버튼, 파일 피커, 선택 메뉴, 스피너, 사이드 시트, 테이블 등이 있습니다. 에버그린 v5는 부분적으로만 테마를 지원하지만 개발자들은 에버그린 v6에 새로운 테마 API를 출시할 예정이어서 더욱 강력하고 접근이 용이할 것입니다..
Grommet
Gromet은 응답성, 접근성 및 모바일 우선 웹 프로젝트를 위해 설계된 구성요소 라이브러리입니다. 그것은 atomic 설계 방법을 수용하고 키보드 탐색, 화면 판독기 태그 등을 허용한다. 심지어 svg 아이콘 목록도 있다.
넷플릭스, 우버, 보잉, HP, 삼성, 트윌리오 등 많은 대기업들이 그로밋을 이용해 웹 앱을 설계했다. 만약 여러분의 디자인이 "Googly"를 덜 느끼기를 원한다면, 그로밋의 구성품들을 살펴보세요.
React Virtualized
React Virtualized는 대규모 목록과 표 형식의 데이터를 효율적으로 렌더링 하는 좁고 구체적인 목적을 제공한다는 점에서 이 소개 페이지에서 독립적입니다. 이 라이브러리는 단일 테이블에 여러 열을 렌더링 하려고 할 때 유용합니다.
React Virtualized의 구성 요소에는 화살표 키 스테퍼, 자동시저, 셀 측정기, 칼럼시저, 멀티그리드 등이 있습니다. 표 형식 요구 사항을 충족하도록 프로그래밍된 다목적 라이브러리입니다.
Semantic UI React
Semantic UI React는 Semantic UI를 위한 공식 플러그인이다. jQuery로부터 자유로우며 선언적 API, shorthand props, 하위 컴포넌트, 확대, 자동 제어 상태 등이 있습니다. 이 라이브러리는 세그먼트, 진행 표시줄, 전환, 페이지화 등을 포함한 50개 이상의 컴포넌트로 이루어진 컬렉션을 자랑합니다.
Rebass
리베이스(Rebass)는 브렌트 잭슨이 스타일링 시스템을 사용하여 만든 primitive components 라이브러리이다. 설계 제약 조건 및 사용자 정의 확장과 함께 일관된 UI를 만들 수 있도록 설계되었습니다. 4KB의 풋프린트로 Rebass는 빠른 설계 및 개발을 의미합니다.
Rebass는 테마 UI와의 호환성 및 마이닝 처리가 되어 유용성, 확장성, 테마 UI와의 높은 호환성을 제공한다. 문서에는 다양한 주제에 대한 가이드 목록이 포함되어 있습니다. 이 블로그 게시물을 읽고 Rebass의 철학에 대해 자세히 알아보십시오.
'Javascript > react' 카테고리의 다른 글
| React Recoil 사용하기 (0) | 2022.04.11 |
|---|---|
| React에서 Axios 사용하기 (0) | 2022.04.06 |
| React Fragments (0) | 2021.04.02 |
| React 주요 개념 Event 처리 (0) | 2021.03.30 |
| React 주요 개념 Lifecycle of Component (0) | 2021.03.29 |
댓글