웹을 이용해서 프로그램을 구현하려면 UI와 관련해서 많은 작업을 해야하는데(기본적인 HTML과 Javascript를 왔다갔다 해야하고 등등) Bootstrap의 등장 이후 많은 웹 관련 프로그램들의 화면관리가 쉬워졌고, 이 Bootstrap과 같은 기반의 많은 UI 라이브러리들이 탄생하였다. React도 웹상에서 Front-End를 구성하는 요소로 많이 사용되다 보니 이런 UI를 사용하는 것이 거의 필수라고 말할수 있겠다.
뭐 ! 이런 UI Framework 중에서 마음에 드는게 없거나 필요한 기능이 없으면 직접 만들어 써야하겠지만;;;
React 현재 사용되고 있는 React용 UI Framework 중에서 실무에서 정말 쓸만한 녀석들만 골라봤다.

 

1. MUI

구글에서 발표한 머터리얼 UI 시스템을 발표했는데 이 도구를 이용하시면 쉽게 머터리얼 UI를 구현할 수 있게 됩니다.
사용량이 많아서인지 조금만 찾아도 찾을수 있는 다양한 예제들과 Q&A가  MUI의 가장 큰 장점이다. 개인적으로는 Table과 DataGrid가 나뉘어 있는데, 한국적인 맛을 내기가 어렵다. 특히 DataGrid는 서양적인 인터페이스라서…좀 난감하다. 이게 무슨 소린고 하니 게시판형 게시물 위주인 우리나의 인터페이스랑 외국의 포럼용 공개프로그램들의 인터페이스를 비교하면 쉽게 이해되실듯…

---

2. Ant Design (Antd)

반드시 필요한 기등들은 전부다 구현되어 있고, 중국에서 제작된 프레임워크라 그런지 동양(?)적 혹은 한국적(?)으로 생각하는 인터페이스에 적용하기 쉽다.
TypeScript로 컴포넌트들이 전환되면서 예제도 TypeScript와 기존예제를 제공하고 있다. 기존 버전의 라이브러리와 호환성이 떨어질때가 있으니 버전별로 잘 파악해야 한다.
기본 샘플예제가 풍부하고 API 및 여러가지 디자인 가이드 들도 잘 준비되어 있다. 

---

3. Semantic UI React

개인적으로 정말 좋아하는 형태의 인터페이스를 가지고 있다. 웹 전용의 어플리케이션을 제작한다면 무조건 이녀석을 사용할것 같다. 현재 버그가 있어서 튜토리얼에 나와있는대로 설치해도 작동하지 않는다.
기본적으로 import 해야하는 CSS 파일에 문제가 있어서 발생하는 문제로 npx로 react 프로젝트를 생성하면 react-script 15 버전이 설치되는데 react-script를 14버전으로 맞춰주거나 혹은 실행하면서 ;;을 ;으로 수정되도록 해서 실행시켜야 한다.
21년 10월경부터 리포팅된 버그인것 같은데 현재 배포되는 react 버전에 맞춰서 제대로 수정되지 않은 듯 하다. 이걸 알아낸다고 한참 걸렸다. 너무 마음에 들었는데 쓰질 못해서 참 답답했는데…
어쨌든 해결해서 사용할수 있게 되었다.

HTML과 Web base의 Bootstrap처럼 Semantic UI 에서 출발해서 react지원 버전까지 나온 녀석이다. 몇몇가지 컴포넌트들은 반응형에 고려되어 있지 않다. 하지만 그 덕분에 오히려 PC용 Web base에서는 더 좋은 UI를 만들수 있지 않을까 생각되기도 한다.

---

4. Blueprint JS

조금 부족해보이지만 나름 자기만의 컴포넌트를 가지고 있기도 하다. 
나름 깔끔하면서 자기만의 색을 가지고 있는 프레임워크다. 특히 Table 이 Excel 형태로 구현되어 있어서 datagrid 처럼 쓰고 싶은 분들에게는 유용할듯 하다. 
자체적으로 제공하는 HotKey 지정은 정말 편리하게 사용할 수 있다. 단축키 지정에 사용한다던지 특수 액션키로 사용하기에 좋다.

Context API가 레거시 버전형태로 사용되고 있어서 기본적인 Warning이 발생하는게 눈에 거슬린다. 추후 버전업 되지 않으면 레거시 API가 제거되었을때 작동하지 않을 위험성을 가지고 있다. (뭐 그렇게 둘것 같지는 않고…정 안될때는 react 버전을 마이그레이션 하면 되니까..) 

개성있는 프레임워크를 사용하고 싶다면 한번 살펴볼만 하다.

---

5. PrimeReact

이것저것 찾다가 우연히 찾게된 프레임워크. 처음에 살펴볼때는 또 Bootstrap 아류작 이거나 타 프레임워크 아류작 정도로 생각했는데 준비된 컴포넌트가 생각보다 훨씬 많아서 깜짝 놀란 녀석이다.
타 프레임워크에서 찾아보기 힘든 inputMask, speed dial, DataTable 의 간편한 Cell edit 기능, Data Scroller, overlay panel, splitter,  ContextMenu, Panel Menu, MegaMenu, Slide Menu, Dock 및 Chart.js, Galleria 까지 내부에 탑재하고 있어서 아주 다양한 표현을 이 한개의 라이브러로 쉽게 처리할 수 있다.
특히 Table에서 Inline Edit를 구현할때 Antd보다 더 쉽게 구현할수 있다. 
전반적인 인터페이스 구조는 antd 를 많이 닮아있다. Theme도 미리 여러가지가 준비되어 있어서 쉽게 적용이 가능하다는 장점이 있다.

많이 알려지지 않은 프레임워크인데도 불구하고 많은 기능을 탑재해서 개발자들에게 많은 도움이 되는 프레임워크라고 할 수 있다.

---

그럼 무엇을 써야할까 ?

인터넷에서 많은 정보를 얻으면서 진행하고 싶다면 MUI 와 Ant Design을 추천한다. 이중에 디자인 UI 감성이 맞는 녀석으로 사용하면 된다.
최대한 많은 쓸만한 컴포넌트와 쉽게 테마를 적용하고 싶다면 PrimeReact를 추천한다.
개성넘치면서 독특한 UI를 사용하고 싶다면 Semantic-UI react 혹은 Blueprint JS 를 사용해보길 권한다.

혹은 덩치가 커지는것을 두려워하지 않는다면 여러가지 프레임워크를 섞어써도 무방하다. 단, 프레임워크별 궁합은 확인해보지 않았지만, Antd + blueprint JS 를 섞어서 사용해본 결과 크게 문제가 되는 일은 없었다.

다섯가지 모두 안정성이 높고 사이트 레퍼런스가 잘 구축되어 있어서 쫓아가는데 큰 어려움은 없을 것이다.