React 2023년 최고의 UI Framework 정리

Material Kit React 

$ npm install @material-ui/core

Google의 Material Design에서 영감을 얻어 만들어진 Material Kit React는 일관성을 주요 기능으로 하는 요소 집합을 구축합니다. 이러한 방식으로 웹 개발 프로젝트는 전체적으로 외관과 기능의 유사성을 유지합니다. 키트에는 단추, 배지, 슬라이더, 메뉴, 페이지, 탐색 모음, 탭 및 알약과 같은 몇 가지 기본 요소도 포함되어 있습니다. 이 React Component Framework를 사용하면 대부분의 요소에 대한 스타일, 크기 및 색상을 사용자 지정할 수 있습니다. JavaScript 요소에는 Modal, 도구 설명, 날짜 선택기, 회전목마 및 팝업이 포함됩니다.

 

 

Storybook : MIT License

npx sb init

이것은 정확히 컴포넌트 프레임워크가 아니라 React와 다른 많은 기술과 플랫폼을 위해 UI 컴포넌트를 분리하여 개발하기 위한 오픈 소스 도구입니다. 스토리북을 차별화하는 것은 하나의 구성요소로 작업할 수 있게 해주어 개발 속도가 훨씬 빨라진다는 것입니다. 또한 스토리북을 통해 재사용할 구성요소를 문서화하고 구성요소를 자동으로 시각적으로 테스트하여 버그를 방지할 수 있습니다. 마지막으로, 응답 레이아웃을 미세 조정하거나 액세스 가능성을 확인하는 것과 같은 작업을 수행하는 데 도움이 되는 추가 기능 에코시스템을 사용하여 스토리북을 확장하십시오.

 

 

Chakra UI : MIT License 

$ yarn add @chakra-ui/react @emotion/

$ npm i @chakra-ui/react @emotion/

웹사이트와 리액트 애플리케이션을 디자인하기 위해 소개되었고, 세군 아데바요는 그것을 개발합니다. Chakra UI 라이브러리는 리액트 앱 개발자의 필수 아이템으로 부상했으며, 멀티 컬러 모드를 통해 고객의 편의에 따라 어둠이나 조명을 전환할 수 있습니다. 게다가, 그것은 매우 확장 가능하고 맞춤형입니다.

 

Ant Design for React

npm install antd

yarn add antd

수십 개 언어에 대한 국제화 지원을 포함합니다. 설계 사양에 따라 구성요소를 사용자 정의할 수도 있습니다. 예를 들어, 개미 설계에서는 스타일 언어로 Less.js를 사용합니다. Ant Design 구성 요소에는 버튼, 아이콘, 그리드, 빵가루, 드롭다운 메뉴 등이 포함됩니다.

 

Material UI

npm install @mui/material @emotion/react @emotion/styled

yarn add @mui/material @emotion/react @emotion/styled

공식적으로 MUI(Material UI)로 알려진 이 라이브러리에는 새로운 기능을 보다 빠르게 전달할 수 있는 기본 React UI 구성 요소 라이브러리가 포함되어 있습니다. 다음 네 가지를 포함합니다:

 

 

Semantic UI react

npm install semantic-ui-react semantic-ui-css

인간 친화적인 HTML을 사용하여 아름답고 응답성이 높은 레이아웃을 만들 수 있도록 지원하는 개발 프레임워크입니다. 이 프레임워크는 HTML의 의미론적 스타일에 더 영향을 받아 모든 CSS 클래스에 의미를 가집니다.

단어 및 클래스를 교환 가능한 개념으로 취급합니다. 클래스는 개념을 직관적으로 연결하기 위해 명사/수정자 관계, 복수, 어순과 같은 자연 언어의 구문을 사용합니다. 또한 기능을 트리거하는 동작이라는 간단한 구문을 사용합니다.

 

React Admin

npm install react-admin

yarn add react-admin

REST/GraphQL API 위에 B2B(Business-to-Business) 관리 애플리케이션을 구축하는 데 적합하며 설계에 따라 사용자 지정할 수 있습니다. React: Material UI, React Router, Redux, React Final Form 외에도 잘 알려진 여러 프로젝트로 구축되었습니다. 후자는 인기 있는 상태 관리 솔루션의 형태입니다. 무료 버전과 구성 요소 외에도 엔터프라이즈 솔루션도 있습니다. 엔터프라이즈 솔루션에는 Marmelab의 프로 지원 및 개인 모듈 액세스가 포함됩니다. React Admin을 활성화하여 유지 관리합니다.

https://github.com/marmelab/react-admin

GitHub - marmelab/react-admin: A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL

https://marmelab.com/react-admin/

React Admin

 

React Bootstrap

npm i react-bootstrap

 

React Router

$ npm i react-router

 

React Virtualized

npm install react-virtualized --save

 

Blueprint UI

npm install --save @blueprintjs/core

 

Evergreen-UI

$ npm install --save evergreen-ui