(블로그를 starrybleu.github.io 로 옮겼었는데, 생각보다 markdown 방식으로 글을 쓰기가 그다지 편하지 않았고 이미지 첨부하면서 작성하는게 영 귀찮아서 다시 티스토리에 글을 써보려고 한다. JPA specification 관련 글 몇개는 저기 있다. 언제 옮겨오지?)
약 지난 11개월동안, 사내 백오피스 웹 앱을 전면 개편하기 위한 개발을 하고 출시를 하고나서 얻은 경험을 바탕으로 리액트로 UI/UX 개발을 하면서 알게된 좋은 라이브러리를 정리하고자 글을 쓰게 되었다.
전반적인 의견으로는 npm 라이브러리의 다운로드 수가 많은 게 가장 좋다.
1. UI framework
- reactstrap : 현재 최신버전 bootstrap 4 기준의 CSS 프레임워크. 구 버전의 IE 에 적용하긴 힘들 듯.
- react-bootstrap : 도 있는데 이것보단 reactstrap 이 개인적으로 사용하기에 더 편하고, 업데이트가 잘 되고 있는 것 같단 느낌이 들었다. 프로젝트 초반에는 이걸 쓰다가 중간에 reactstrap 으로 갈아탔다.
2. Input 관련 라이브러리
reactstrap 이나 react-bootstrap 을 쓰면 기본적으로 <Input/> 컴포넌트가 있어서 이걸 쓰면되는데, 날짜나 숫자만 입력하게 하고 싶거나 등등의 요구사항이 있으면 직접 구현하는 것보다 아래의 라이브러리가 훨씬 완성도가 좋다.
- react-datetime : moment 를 이용하여 날짜를 달력에서 편하게 설정할 수 있는 기능 제공
- react-number-format : 숫자만 입력가능하고, thousands seperator 등의 숫자와 관련된 아주 디테일한 설정을 제공해주는 훌륭한 라이브러리
- react-select : <select> 와 관련된 라이브러리. Creatable, AsyncSelect, AsyncCreatable 등 실제로 필요한 기능은 알차게 들어있고, 문서화도 잘 되어 있는 라이브러리
3. 데이터 테이블
사실 데이터 테이블이 가장 어려웠던 부분인데, 최근 아주 훌륭한 라이브러리를 알게 되었다. (사실 그 라이브러리가 이 글을 쓰게 한 원동력이 되었다.)
- ag-grid : 원래 유료로 판매하는 라이브러리이고, angular 컴포넌트를 처음 만들기 시작했던 것 같은데 지금은 Vue, React 에서도 쓸 수 있게 porting 되어 있고, Community 버전도 있어서 기본적인 기능들은 무료로 마음껏 사용이 가능하다. 내가 진행하고 있는 프로젝트도 무료 버전을 쓰고 있고 아직까진 충분하다. 테이블의 모든 Cell 이 가상화되어 있어 성능 저하가 없고, filter, sort 등 아주 다양한 API 를 제공해주고 있기 때문에 꼭 한번 써보길 추천! 유료버전은 피벗, Set Filter 같은 기능이 제공되는데 웹에서 정말 Excel을 쓰는 것처럼 쓸 수 있다.
- react-table : 기본적인 data table 이고 안타까운 점은, Cell, Row 가 가상화되어 있지 않아, 많은 데이터를 render 할 경우, 테이블 전체가 render 되면서 성능저하가 생긴다. 그리고 데이터를 filter, sort 한 후, row selection 을 할 때 화면에 보여지는 index (viewIndex) 를 얻을 수 없어서 직접 구현하거나 포기해야한다. Shift 키를 이용한 selection 도 지원하지 않아 해당 기능이 필요하다면 직접 구현하거나 다른 라이브러리를 찾는 것을 추천. 백엔드가 spring-data 라면 Pageable 과 궁합이 잘 맞다.
- 그 외 react-data-grid 라는 것도 있고, react-virtualized 라는 것도 있다. react-data-grid 도 훌륭한 라이브러리이지만 react-table 과 흡사하고, react-virtualized 는 아주 활발한 프로젝트인데 아쉬운 점은, filtering 과 selection 은 라이브러리 외부에서 직접 구현을 해줘야한단 것이다.(이 라이브러리의 Table 을 쓰면 sort 는 내장되어 있는 것 같음) 이 react-virtualized 는 오직 성능저하 없는 rendering 에만 관심사를 두고 있다고 스스로도 말하고 있다.
=> 그냥 데이터 테이블은 더 찾아보지도 말고 ag-grid 사용을 추천!!!!
4. 기타 도움이 되는 라이브러리
- lodash : 말이 필요없는 라이브러리. 그러나 ES 스펙이 확장됨에 따라 필요성이 점점 감소하고 있다.
- match-sorter : 데이터의 filtering 하는데 많은 도움을 받을 수 있는 라이브러리. 보통 데이터 테이블에서 custom Filtering 이 필요할 때 사용했다.
- react-spinners : Loader 나 Spinner, Throbber ? 이름은 다르지만 여튼 spinner 를 구현하기에 아주 간편한 컴포넌트 모음
- react-tooltip : 툴팁을 간편하게 사용 가능.
- sanitize-html : DB 에 HTML 로 저장되어 있는 텍스트를 plain text 로 편하게 변환할 수 있도록 해주는 라이브러리. 이걸 날로 짜려면 버그도 많이 생기고, 한참 걸릴 듯.
- moment : 두 말할 필요도 없는 날짜 관련 라이브러리
- react-tabtab : reactstrap 에도 <Tab/> 이 있지만, 좀 더 많은 인터랙션이 필요할 때 쓰면 좋다. 하지만 라이브러리 사용자가 많지 않기 때문에 사용 전, 프로젝트에 써도 되는지 충분한 검증을 하고 나서 사용을 하기를 권함
- react-highlight-words : 패턴이나 문자열 일치하는 걸 highlight 해준다. 한 번 써보면 짱임.
- qs : URL 의 쿼리 스트링을 stringify 또는 parse 해주는 라이브러리.
- alasql + xlsx : 프론트엔드에서 csv, excel 로 export 가 가능하도록 해주는 라이브러리. 보통은 백엔드에서 apache poi 등을 이용해 엄청 노가다를 하면서 엑셀 다운로드 등을 구현해왔는데, 간단한 자료구조는 이 라이브러리만으로도 충분했다.
5. mobx + mobx-react
- 프로젝트 초반에 redux 를 도입하려다가 생각보다 높은 learning curve 에 의해 나와 다른 프론트엔드 개발자가 제한된 시간 내에 redux 를 학습하여 개발하기엔 무리라고 판단이 되었다.
- 그러다 프로젝트가 커지면 커질수록 상태 저장 store 의 필요성을 느끼게 되었고, redux 의 대안으로 mobx 를 쓰게 되었는데, 대만족.
- 배우기 쉬운 사용법, 몇개 없는 간단한 API, 읽기 쉬운 코드, 알아서 render 최적화 등의 장점이 있다.
- 다만, 사용하면서 최적화와 관련한 부분은 개발하면서 감을 익히게 되었는데, 간단히는 최대한 작은 컴포넌트로 쪼개면 해결이 된다. 불필요하게 너무 작게 쪼갤 필요는 없고, 대부분 컴포넌트들의 배열을 render 한다든가 하는 부분 위주로 쪼개주면 되고, 성능저하가 발생하면 그 때 해당 부분을 찾아서 작게 쪼개주면 된다.
그 외 수많은 라이브러리를 사용하고 있지만, 위의 핵심적인 라이브러리만 사용해도 개발엔 충분한 것 같다.
11개월 전, 처음엔 자바스크립트도 잘 몰랐는데(지금도 잘 알지는 못하지만) 지금 돌아보니 많이 성장했음을 느낀다. 다만, 위에 정리한 것처럼 처음부터 저런 라이브러리가 있으니 찾아보라는 의견을 들을 수 있는 조언자가 있었다면 얼마나 좋았을까란 생각이 든다. 위에 정리하지 않은 라이브러리 중에서도 아주 많이 사용해보고 검증해봤지만 결국 현재 제품 코드에 포함되지 못한 게 너무 많다. => 시간 낭비했다. 다른 프론트엔드 입문자가 있다면, 이 글을 보고 삽질하지 않기를 바라고 스스로 개발자의 안목을 더 키울 수 있도록 하는 계기가 되었다.
