분류 Reactjs

일반적으로 사용되는 React 컴포넌트 라이브러리 가이드

컨텐츠 정보

  • 조회 477 (작성일 )

본문

GitHub에는 말 그대로 수백 개의 리포지토리가 있으며 모두 React 생태계에 기여하기 위한 것입니다. 

초보자를 위한 훌륭한 상태의 이면은 바로 React 여정을 시작하는 곳입니다. 저자는 구성 요소 라이브러리 공간의 풍경에 대한 정보에 입각 한 경험 있는 의견을 제공합니다.


https://maxrozen.com/guide-to-component-ui-libraries-react/


Ant Design 


Ant Design Pro 

프로젝트 링크 : Ant Design


번들 크기 (BundlePhobia에서) : 1.2mB 축소, 349.2kB 축소 + gzip, 트리 쉐이킹 사용시 감소


Pros:

  • Ant Design에는 사전 제작 된 템플릿이 있는 별도의 프로젝트 (Ant Design Pro)를 포함하여 엄청난 양의 지원 문서, 커뮤니티가 함께 제공됩니다.
  • 백 오피스 / 내부 앱 디자인으로 빠르게 표시하는 데 사용하는 UI 라이브러리의 종류


Cons:


  • 접근성이 부족합니다
  • 거대합니다. 사용할 때 상당한 성능 영향을 기대하십시오.
  • CSS를 오염시킵니다 (Ant가 아닌 구성 요소의 스타일을 방지하기 위해 !important 추가 예상)


Bootstrap 


Bootstrap 

나는 실제로 Bootstrap을 UI 라이브러리로 상대적으로 높게 평가합니다. 디자인 상을 받을 수는 없지만 사이드 프로젝트 및 최소 실행 가능한 제품에 대한 작업을 수행합니다.


그래도 사용하려는 용도에 따라 다릅니다. React를 처음 사용하는 경우 시작하는 데 사용할 수 있는 훌륭한 라이브러리입니다. 경험이 많은 개발자라면 스타일 구성 요소 / 감정을 살펴보고 싶을 것입니다.


Bootstrap 용 React 바인딩이 있는 두 개의 인기 있는 라이브러리가 있습니다. 저는 개인적으로 Reactstrap 만 사용했습니다.


프로젝트 링크 :


  • React Bootstrap
    번들 크기 (BundlePhobia에서) : 축소 된 111kB, 축소 된 34.4kB + gzip, 트리 쉐이킹 사용시 감소
  • Reactstrap
    번들 크기 (BundlePhobia에서) : 축소 된 152.1kB, 축소 된 39.4kB + gzip, 트리 쉐이킹 사용시 감소


Pros:

  • React 바인딩과 함께 알고 있고 사랑하는 부트 스트랩 라이브러리
  • CSS-in-JS를 통해 쉽게 사용자 정의
  • 광범위하게 사용되어 버그 / 문제가 걱정되지 않을 정도로 충분히 오래되었습니다.
  • 빠른 시작
  • React에서 완전히 다시 구현되었으므로 jQuery 종속성 없음

Cons:

  • 부트 스트랩 : 사이트를 맞춤 설정하지 않으면 다른 모든 사이트처럼 보입니다.

Bulma 


Bulma 

Bulma는 여기에 제시된 대부분의 라이브러리와 다릅니다. 순전히 CSS 프레임워크이고 JS가 필요하지 않기 때문입니다. Bulma의 클래스를 직접 사용하거나 react-bulma-components와 같은 래퍼 라이브러리를 사용하도록 선택할 수 있습니다.


프로젝트 링크 :


Pros:

  • 부트 스트랩 모양과 느낌이 없습니다.
  • 무언가를 빠르게 시작하고 실행하는 데 좋습니다.
  • 최신 기능 (Flexbox / Grid under the hood)

Cons:

  • 접근성 : 일부가 있지만 다른 라이브러리만큼 강력하게 WCAG 지침을 따르지 않습니다.

Chakra UI 


Chakra UI 

프로젝트 링크 : Chakra UI

  • 번들 크기 (BundlePhobia에서) : 326.2kB 축소, 101.2kB 축소 + gzip, 트리 쉐이킹 사용시 더 적음

Pros:

  • 접근성 : WAI-ARIA 지침을 따르고 구성 요소는 aria 태그를 사용합니다.
  • 지원을 위한 Discord 서버
  • 쉽게 사용자 정의 가능 (테마 지원 포함)
  • 고도로 모듈화 되어 있으므로 트리 쉐이킹은 실제로 사용하지 않는 코드를 제거합니다.


Cons:


  • 아주 새로운.


Notes:

  • v1 릴리스에 매우 가깝기 때문에 v0.8.0의 주요 변경 사항에 유의하십시오.


Material UI 


Material UI 

머티리얼 UI는 제가 싫어하는 라이브러리 중 하나입니다. 과거에는 고객에게 매우 촉박 한 기한을 통과하는 데 도움이 되었지만, 가능한 한 빨리 다른 거의 모든 것을 선호하여 항상 이를 제거합니다.


과거에는 JSS를 작성해야만 머티리얼 UI의 스타일을 사용자 지정할 수 있었지만 이제는 스타일 구성 요소와 감정으로 스타일을 재정의 할 수 있습니다.


프로젝트 링크 : 머티리얼 UI


  • 번들 크기 (BundlePhobia에서) : 325.7kB 축소, 92kB 축소 + gzip, 트리 쉐이킹 사용시 더 적음

Pros:

  • 포괄적 인 문서
  • 아이콘 라이브러리는 방대하다
  • 사용이 간편함 (처음에는)

Cons:

  • 사용자 정의가 어렵고 고통스럽지만 필요합니다 (시각적 개선을 위해).
  • 성능 : 과도한 DOM 노드를 렌더링 하는 것으로 알려져 있음
  • 앱이 Google에서 만든 것처럼 보일 것입니다 (일부 사용자에게는 전문가가 될 수 있음).

Semantic UI 


Semantic UI 


프로젝트 링크 :


Pros

  • 컴포저 블 (구성 요소 전달을 위해 as prop 사용)
  • 쉽게 사용자 정의 가능
  • 유용한 문서
  • 높은 프로필 사용자 (Netflix 내부, Amazon 게시)
  • TypeScript 지원

Cons

Honourable mentions 


Reach UI 


Reach UI는 개발자가 디자인 시스템에서 액세스 가능한 React 구성 요소를 빌드 할 수 있도록 하는 데 중점을 둔 저수준 구성 요소 라이브러리입니다.

각 구성 요소가 자체 npm 패키지로 개별적으로 내보내지기 때문에 사용할 수 있는 번들 크기가 없습니다.


Reakit 


Reakit은 또 다른 저수준 구성 요소 라이브러리입니다. 기술적으로는 UI 라이브러리이지만 CSS와 함께 제공되지 않습니다. 따라서 여전히 스타일링  솔루션을 찾아야 합니다.

  • 번들 크기 (BundlePhobia에서) : 119.9kB 축소, 32.1kB 축소 + gzip, 트리 쉐이킹 사용시 더 적음


Rebass 


Rebass 

Rebass는 얼마 동안 내 레이더에 있었습니다. 테마와 함께 제공되지 않지만 쉽게 테마를 지정할 수 있는 매우 강력한 구성 요소 라이브러리입니다. 이것이 실제로 어떻게 작동하는지에 대한 예는 데모를 참조하십시오.


프로젝트 링크 : Rebass

  • 번들 크기 (BundlePhobia에서) : 축소 된 43kB, 축소 된 14.4kB + gzip, 트리 쉐이킹 사용시 감소


Notes 


이 목록을 만들 때 기업 디자인 시스템을 피하려고 시도했지만 일부 (Material UI)가 널리 채택되어 이 목록이 없으면 불완전 할 것입니다.


또한 Styled-Components 및 Emotion과 같은 CSS-in-JS와 Tailwind와 같은 유틸리티 CSS 시스템은 명시 적으로 "React Component 라이브러리"가 아니라 구성 요소를 만드는 데 사용되는 도구이므로 의도적으로 제외했습니다.



React 컴포넌트 라이브러리