해당 포스트는 React Libraries To Use In 2021: 17 Top Picks 를 번역하였습니다.
React는 모바일 및 웹 애플리케이션 모두를 위한 주요 UI를 만들 수 있는 JavaScript 라이브러리입니다. 다른 JavaScript 프레임워크 및 라이브러리와 원활하게 통합되며 구성 요소라고 하는 재사용 가능한 작은 코드 조각이 포함됩니다. 높은 모듈성으로 인해 React 구성 요소 라이브러리는 UI 개발을 최적화할 뿐만 아니라 극도의 유연성을 제공합니다.
React 라이브러리는 기능적이고 인상적으로 보이는 응용 프로그램을 만드는 데 도움이 될 뿐만 아니라 다른 라이브러리보다 더 빠르고 쉽고 적은 코드로 만들 수 있습니다. 여기에서는 이러한 각 라이브러리를 처음부터 프로젝트에 통합하고 사용을 시작하는 방법을 설명하겠습니다.
다음은 2021년 이후에 모든 React 프로젝트에 추가될 것으로 예상되는 몇 가지 React 라이브러리입니다.
1. React Query
React로 데이터를 가져오는 과정에는 일반적으로 많은 코드가 필요합니다. React Query를 사용하면 네트워크 요청을 할 때 작성하는 코드의 양을 줄일 수 있습니다. 훅을 사용하여 useQuery이전에 작성해야 했던 모든 React 코드를 대체할 수 있습니다. 상태 변수를 선언하지 않고도 필요한 모든 데이터를 제공합니다.
그럼에도 불구하고 데이터 검색을 더 쉽게 만드는 것은 React Query가 하는 일의 작은 부분만을 다루고 있습니다. 그 엄청난 힘은 우리가 만드는 요청을 캐시하는 능력에 있습니다. 결과적으로 이미 요청한 항목이 있으면 별도의 요청을 하지 않고 캐시에서 읽어오기만 하면 되는 경우가 많습니다.
이는 코드의 반복을 줄이고 API에 가해지는 부하를 줄이며 애플리케이션 관리를 간소화하기 때문에 매우 유용합니다.
2. Ant Design
좋은 디자인의 React 앱을 만드는 데 있어 Ant Design은 최고의 React 라이브러리 중 하나입니다. 미리 만들어진 구성 요소를 사용하여 응용 프로그램의 스타일을 빠르게 지정할 수 있습니다. Ant Design은 React 앱 인터페이스 및 디자인에 통합하기 위해 생각할 수 있는 모든 형태의 구성 요소를 제공합니다.
Ant Design과 같은 구성 요소 라이브러리를 사용하면 자주 일관성이 없는 스타일을 직접 작성해야 하는 수를 줄여 개발 시간을 단축할 수 있습니다. 또한 이러한 미리 만들어진 구성 요소는 일반적인 모달 또는 도구 설명과 같이 처음부터 구성하기 어려운 기능을 제공합니다.
오늘 앱을 빌드하려고 생각하고 있고 좋은 구성 요소 라이브러리가 필요하다면 Ant Design을 선택하는 것이 좋습니다.
3. Create-React-App
Create-React-App은 빌드 구성이 필요하지 않은 CLI 도구입니다. 이를 통해 자신만의 상용구를 쉽게 만들고 앱 개발을 원활하게 시작할 수 있습니다. 따라서 처리해야 할 종속성이 하나만 있으므로 추가 복잡성이 없습니다. 이 CLI 도구는 Webpack, Babel, EsLint 등의 언더레이어가 있으므로 간단한 웹 앱에 더 적합합니다.
4. Zustand
Redux의 기능과 힘과 React Context의 단순성을 결합한 라이브러리를 찾고 있다면 Zusstand를 확인해야 합니다. Zusstand를 시작하는 것은 매우 간단합니다.
Zusstand는 작고 빠르고 확장 가능한 베어본 상태 관리 솔루션입니다. 그것은 필요에 따라 모든 상태 값과 업데이트 기능을 포함하는 특수 상태 객체를 구축하기 위해 생성 기능을 활용하는 것을 수반합니다.
또한 앱 구성 요소에 상태를 제공하기 위해 컨텍스트 공급자가 필요하지 않습니다. 당신이 해야 할 일은 상태 조각을 구성하고, 그것을 후크라고 부르고, React 컴포넌트 내의 객체에 선언한 상태 변수와 메소드를 받아들이는 것뿐입니다.
Immer 는 Zusstand의 이상적인 동반자입니다!
5. React Bootstrap
React Bootstrap은 GitHub에 19.3k 별과 3.1k 포크가 있는 가장 위대한 React 구성 요소 라이브러리 중 하나입니다. 부트스트랩 JavaScript를 React로 완전히 대체합니다. 각 구성 요소는 React 구성 요소 스타일로 설계되었습니다. 이것은 jQuery와 같은 불필요한 라이브러리가 더 이상 존재하지 않는다는 것을 의미합니다.
React 구성 요소 모델을 사용하면 각 구성 요소의 형태와 기능을 더 잘 제어할 수 있습니다. 각 구성 요소는 사용성을 염두에 두고 설계되었습니다. 그 결과 표준 부트스트랩으로 달성할 수 있는 것 외에 기본적으로 액세스할 수 있는 구성 요소 모음이 생성됩니다.
6. Material UI
Material UI는 React 프로젝트에서 사용할 모든 머티리얼 디자인 기능을 포함하는 최고의 React 라이브러리 중 하나로 간주됩니다. GitHub에는 67.8k 이상의 별과 21.6k 포크가 있습니다.
당신이 디자이너가 아니어도 걱정하지 마십시오. Material UI는 웹사이트에서 선택할 수 있는 다양한 테마를 제공합니다. 충분한 문서가 있으므로 문제가 발생하면 항상 필요한 것을 찾을 수 있습니다.
7. React Hook Form
React Hook Form은 간단한 데이터 유효성 검사를 허용하는 간단한 후크 기반 라이브러리입니다. 벤치마크에 따르면 다른 대안보다 훨씬 빠릅니다. React Hook Form의 후크 사용은 믿을 수 없을 정도로 자연스러운 느낌을 줍니다. 또한 참조(즉, 제어되지 않는 입력)를 사용하여 필드에서 값을 검색하여 표준 자바스크립트로 만듭니다.
Typescript로 작성되어 양식 값을 지원하기 위해 양식 데이터 유형을 작성하는 데 도움이 됩니다. 이 라이브러리를 사용하면 양식에 오류가 없어져 렌더링 시간이 영구적으로 단축됩니다. 또한 React의 상태 관리 라이브러리와 통합하여 사용할 수 있습니다.
8. Rebass
Styled System 라이브러리를 기반으로 하는 Rebass는 매우 강력한 테마 사용 가능 UI 요소 세트를 생성할 수 있는 작은 UI 구성 요소 라이브러리입니다. 이 초소형 파일에는 8개의 기초 구성 요소만 있으며 모두 반응형 웹 디자인을 위해 설계되었습니다.
내장된 ThemeProvider를 사용하면 구성 요소의 스타일이 지정된 시스템을 사용하여 앱의 사용자 지정 UI 구성 요소로 확장할 수 있습니다. 컴포넌트 라이브러리에 완전히 의존하고 싶지 않고 개발 중에 기존 라이브러리를 확장하려면 Rebass를 확인해야 합니다.
9. React Router
React Router는 개발자가 단일 페이지 앱에서 탐색을 간단하게 만들기 위한 최고의 구성 요소 라이브러리 중 하나입니다. 뿐만 아니라 라이브러리는 부드러운 화면 간 전환, 서버 측 렌더링 및 생생한 중첩 지원도 제공합니다.
React로 애플리케이션을 구축하는 경우 선언적으로 결합할 수 있는 특정 구성 요소가 있으면 도움이 됩니다. React 라우터는 이러한 구성 요소의 모음입니다.
10. Semantic UI React
Semantic UI React는 Semantic UI에 대한 공식 React 통합입니다. 파이프라인에 추가 기능을 추가하는 jQuery 기반 라이브러리입니다. 이 프로젝트는 JSX 코드를 사용하여 구성 요소를 직접 정의하고 React의 구성 요소 코드와 바인딩합니다.
라이브러리에는 의미상 친숙한 코드를 이해하고 생성하도록 설계된 수많은 사전 구축된 구성 요소가 함께 제공됩니다. GitHub에 10.6k 이상의 별이 있는 잘 알려진 반응 구성 요소 라이브러리입니다.
11. Redux
가장 인기 있는 상태 관리 라이브러리 중 하나는 Redux입니다. 20.9k GitHub 별과 3k 포크로 Redux는 최고의 구성 요소 라이브러리 범주에 속합니다. React UI의 라이브러리 구성 요소와 함께 사용하도록 특별히 제작되었지만 Vue, Angular, Ember 등과 같은 다른 프레임워크에서도 사용할 수 있습니다.
Redux는 React 구성 요소를 상태 조각에 연결하여 소품 및 콜백의 필요성을 줄입니다. 종종 개발자의 가장 친한 친구라고 합니다. Redux는 친환경 라이브러리이며 일관된 코드를 작성하는 데 도움이 됩니다. 또한 앱이 실행되는 동안 코드를 편집할 수 있습니다. React Native 에는 React-Redux라는 공식 Redux 라이브러리가 있습니다.
12. React Responsive
미디어 쿼리는 전통적으로 CSS 스타일시트에서 다양한 요소를 숨기고 표시하는 데 사용되었지만 React Responsive는 React 구성 요소의 가시성 또는 스타일을 관리하기 위한 최고의 React 기반 툴킷입니다.
React-responsive는 React에서 미디어 쿼리 구성 요소를 생성할 수 있도록 합니다. 이것은 화면 크기를 기반으로 DOM의 특정 항목을 렌더링하거나 제거하려는 경우에 매우 유용합니다.
13. Chakra UI
Chakra UI는 개발자가 코드 작성 시간을 줄이고 훌륭한 사용자 경험을 만드는 데 더 많은 시간을 할애할 수 있도록 도와주는 React 구성 요소 라이브러리입니다. 앱 개발을 위해 모듈화되고 사용하기 쉽고 간단한 UI 구성 요소를 제공합니다. 이를 사용하여 실제 사용자 인터페이스 디자인 문제를 해결하는 간단하고 재사용 가능한 구성 요소를 구축할 수 있습니다.
props를 전달하여 구성 요소의 스타일을 지정할 수 있는 Box및 와 같은 레이아웃 구성 요소 세트와 함께 제공됩니다 Stack. Chakra UI가 마음에 드는 점은 대부분의 구성 요소가 다크 모드와 호환된다는 것입니다.
14. Styled Components
Styled component는 React가 CSS-in-JS 기술을 사용하여 JavaScript와 CSS를 결합하여 응용 프로그램의 구성 요소 수준 스타일을 허용하는 최신 방법 중 하나입니다. 즉, CSS 모듈의 후계자 역할도 합니다. 구성 요소의 시각적 스타일을 높임으로써 이 이니셔티브는 사용자 경험을 개선하는 것을 목표로 합니다. 따라서 React는 맞춤형 프론트엔드 UI를 구현하는 데 더 유연해졌습니다.
15. Grommet
Grommet은 깔끔한 패키지에 접근성, 모듈성, 응답성 및 테마를 제공하는 React 기반 프레임워크입니다. Gromet의 사용하기 쉬운 구성 요소 라이브러리를 사용하면 응답성이 높고 액세스 가능한 모바일 우선 웹 프로젝트를 만들 수 있습니다. Grommet의 가장 큰 특징은 기존 프로젝트에 쉽게 통합하거나 새로운 프로젝트를 생성할 수 있다는 것입니다.
W3C의 WCAG 2.1 사양을 지원하며 키보드 또는 스크린 리더를 통한 접근성을 제공합니다. Netflix와 Boeing을 비롯한 많은 유명 기업이 이 서비스를 사용합니다.
16. Fluent UI
이전의 Fabric React인 Fluent UI는 Microsoft에서 만든 또 다른 훌륭한 UI 라이브러리입니다. 이 인터페이스는 동작 및 그래픽과 같은 사무용 제품과 유사한 기능을 가지고 있습니다. 데스크톱, Android 및 iOS 장치와 호환되는 UI 라이브러리는 Office 365, OneNote, Azure DevOps 및 기타 여러 Microsoft 제품과 같은 Microsoft 사이트에서 사용됩니다.
사전 빌드된 구성 요소를 사용하여 애플리케이션의 거의 모든 부분을 개발하는 데 사용할 수 있으며 Microsoft의 Office 디자인 언어를 따릅니다. 사무실과 같은 UI로 웹 앱을 만드는 경우 이 기능을 사용하는 것이 좋습니다.
17. Evergreen UI
Segment의 개발자가 만든 Evergreen은 야심찬 웹 제품을 빌드하기 위한 React UI 프레임워크입니다. Evergreen 디자인의 모든 측면은 단순하고 직관적이며 가볍습니다. Evergreen의 설계 결정에 대한 자세한 설명은 최고의 기능 중 하나입니다. 이를 사용하여 우아한 사용자 인터페이스를 빠르게 만들 수 있습니다.
2021년 최고의 React 컴포넌트 라이브러리 17개였습니다.
원문 링크 : https://dev.to/coursesity/react-libraries-to-use-in-2021-15-top-picks-37d7
