React Native UI Components Library Top 3

Fullstack 개발자 혹은 개인 개발자의 경우 컴포넌트들을 일 일이 혹은 조금 예쁘게 꾸미기에는 시간과 노력이 많이 들어가게 됩니다. 그럴 때 UI 컴포넌트 라이브러리를 사용하여 개발 시간을 단축 혹은, 조금 더 사용자에게 친화적인 UI/UX를 구성하는데 도움을 주는 3대 UI 컴포넌트 라이브러리에 대해서 알아보겠습니다.

 

아래는 최근 5년동안의 "native-base, react-native-elements, react-native-paper"에 대한 트렌드를 보여주는 그래프입니다.

npmtrend Top 3 비교 (2022-02-06일 기준)

 

 

위의 그래프는 2022-02-06 일 기준입니다. 최신 npmtrend를 확인 하시려면 아래의 링크에서 확인 하세요.

native-base vs react-native-elements vs react-native-paper | npm trends

 

 

아래의 3개의 컴포넌트는 현재 React Navigation과 아주 호환이 잘 되어 있습니다.

React Navigation | React Navigation

 

1. React Native Elements

약 3년간 부동의 1위 자리를 지키고 있는 UI 컴포넌트 라이브러리입니다.

가볍게 터치를 해서 만들어진 듯한 느낌이어서, 사용하기 쉽고, 커이터마이징도 간편하게 되어 있습니다.

React Native Elements 샘플

 

React Native Elements | React Native Elements

 

2. React Native Paper

상승추세를 유지하며 꾸준히 잘 성장하고 있는 컴포넌트 라이브러리입니다.

이 라이브러리의 가장 큰 장점은 Google Material Design 가이드라인을 준수하고 잘 반영이 되어 있다는 것입니다.

개인적으로 향후 사용해 보고 싶은 UI Components 라이브러리입니다.

React Native Paper 샘플

 

Home · React Native Paper

 

3. Native Base

과거 부동의 1위였으나, React Navigation의 호환성 대응에 느리게 대처하면서 1위 자리를 빼았긴 UI 컴포넌트 라이브러리입니다.

자체 컴포넌트 기능에 React Navigation을 대체할 수 있는 기능이 있었으나, React Navigation 사용자가 점점 늘어나면서 호환성 문제로 1위 자리에서 밀려남.

현재 1위 탈환을 위해서 대대적인 업데이트가 이루어졌습니다. (React Navigation 지원됨)

Builder, Figma지원 같은 다양한 방법으로 개발 지원 또는 계획 중입니다.

Native Base 샘플

 

NativeBase: Universal Components for React & React Native