리액트 UI 라이브러리에 대한 정리

라이브러리(library)

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다.

 

비휘발성 메모리(non-volatile memory, non-volatile storage, NVM, NVRAM)

전원이 공급되지 않아도 저장된 정보를 계속 유지하는 컴퓨터 메모리이다.

 

처음에 접한 react UI library는 Material-UI로 학원 동기생들은 전부 이 라이브러리를 통해 디자인을 진행하였다.

 

 

 

Material-UI

Material-UI Main Page

리액트 기반 UI 라이브러리 중에서 가장 인기 있는 라이브러리다.

주변에서 가장 많이 사용되고 있었기에 이 라이브러리를 선택하기도 하였다.

여기서 직접 해보고 느낀 장점은 역시 자바스크립트, 타입 스크립트 지원인 거 같다.

Material-UI Grid of Components

장점

- 간격, 정렬, 구조 등 다양하게 확인하여 원하는 모양으로 커스터마이징이 가능하다.

- 라디오버튼을 클릭함에 따라 아래 하단의 코드도 변한다.

- 자바스크립트, 타입 스크립트 원하는 코드로 사용할 수 있다.

 

아쉬운 점

- 아직은 클래스형 컴포넌트로 정의되어있어, 함수형 컴포넌트를 사용하는 경우 일부 수정하여 가져와야 한다.

 

사실 이 라이브러리를 선택했던 이유는 크게 두 가지였다.

첫 째, 다른 팀원들이 모두 이 라이브러리를 선택하였다.

둘째, 자바스크립트와 타입 스크립트 사용자가 나누어져 있기에 디자인을 가져오기에 수월했다.

그리고 해외에서 나온 예시도 주로 이 라이브러리로 구성이 되어있다.

 

 

 

Ant Design

다음으로 써본 Ant Design입니다.

Ant Design Main Page

초반에는 중국어로만 구성이 되어있다가, 영문 번역으로 다 되어 사용하는데 어려움은 없을 것이다.

사용방법은 위에 Material-UI와 비슷하지만, 다른 점이 있다.

 

Ant Design Grid of components

장점

- 다양한 예시문이 많다.

 

아쉬운 점

- 커스터마이징 할 수 있는 버튼이 적은 편이다.

 

아직까진 크게 어려움을 느끼거나 불편함을 느끼는 것은 적은 편이다.

 

 

 

chakra

다음은 chakra입니다.

chakra Main Page

사실 이 UI는 써본 적은 없지만, 화면 구성된 페이지는 다른 점이 있어 가져왔다.

 

chakra grid of components

장점

- import를 통합하여 보여준다.

 

아쉬운 점

- 다양한 예시가 적은 편이다.

 

 

 

React Bootstrap

다음은 React Bootstrap입니다.

React Bootstrap main page & grid of components

부트스트랩을 기반으로 만든 라이브러리다.

 

 

 

그 외 다양한 UI가 있다.

reactstrap

reactstrap Main Page

 

Semantic UI React

semantic UI React

잠깐 훑어본 느낌으론 복잡하다고 느낀다.

 

Blueprint

Blueprint

grommet

grommet main page

이 UI에서 눈에 띄는 것은 바로 다른 UI에 없는 차트가 제공이 된다는 것이다.

 

grommet chart of components

이 외에도 더 다양한 차트로 대시보드 만드는데 꽤 유용할 것 같은 라이브러리다.

 

 

 

이상 리액트 UI 라이브러리를 다양하게 접하였다.

이번에 세 번째로 디자인 라이브러리를 써야 할 거 같은데 이번에 grommet를 사용하지 않을까 싶다.

이번에 찾은 차트가 꽤 유용하게 쓰일 거 같아서 사용하게 될 것 같다.

다른 프로젝트에 다양한 라이브러리를 써보는 것도 꽤 좋은 경험이 될 거 같다.

물론 구현이 제1순위이겠지만 말이다.