리액트 UI 라이브러리 정리

소진수·2021년 9월 3일

React

목록 보기

3/3

순위 10위를 리스트한 블로그 와 외국 블로그를 참조하여 리액트 기반의 UI를 편리하게 디자인할 수 있는 라이브러리 중 3가지를 추려봤습니다.

구글 머테리얼 디자인을 기반을 제작되었다. 유니클로, 아마존, 넷플릭스, 스포티파이 등의 기업에서 사용 될 정도로 인기가 많고 관리가 잘되어 있는 라이브러리다. 대부분의 UI와 관련된 모든 것이 준비되어있다.

장점
- 글로벌 스타일 시트(ex. normalize.css)를 사용하지 않아도 필수적인 스타일을 적용시킬 수 있다.
- 전체적으로 동일한 디자인을 선보여서 UX에 도움이 된다.
- 업데이트가 잦다
- 자유도가 높다
- 오피셜 사이트 정리가 잘 되어있다.
단점
- 필요없는 UI가 많이 적용되어있는 경우가 있다.
- 호환성이 제한적이다. iOS, Windows 등의 호환성이 Android 호환성에 의해 제한되어있다.
- 구글 가이드라인에 의해서 Theme이 적용되기에 브랜딩이 제한적일 수 있다.

타입스크립트(Typescript) 기반으로 제작된 라이브러리이다. 사용에 있어서 편리하여 최근 많이 사용되는 추세이다.

인기높은 CSS 프레임워크 Bootstrap을 리액트 기반으로 만들었다. 리액트를 사용해보지 않았으나 부트스트랩을 사용해본 사람이라면 편리하게 사용 가능하다. 하지만 대부분의 유저들이 부트스트랩 그리드 시스템을 적용해야 할 때 사용한다.

장점
- 컨테이너, rows, columns 등의 레이아웃과 컨텐츠를 나열하는데 부트스트랩의 그리드 시스템이 사용되었다.
- 반응형으로 제작하기에 편리하다
- 사용법이 굉장히 잘 정리되어 있다.
- 부트스트랩 4의 Thme을 지원한다
단점
- 컴포넌트가 많지 않다
- 프로퍼티도 적다.