오늘은 리액트를 사용하면서 JSX, 컴포넌트의 상태관리, 렌더링 최적화, 성능 확인 외에 직접 구현해야될 기능들을
리액트 생태계에서 잘만들어둔 라이브러리를 찾아 적용하는 과정에 대해 배웠다.
라이브러리 적용 과정
사용 목적 > 검색 > 사용법 파악 > 적용
- 리액트를 많이 사용해보진 않았지만 동일한 기능을 제공하는 라이브러리가 굉장히 많은 것을 뼈저리게 느꼈던 적이 있다.
만들어져 있는 UI를 구매해서 사용한 적이 있는데 form 컴포넌트 폴더이름이 redux-form 과 다른 것으로 두가지가 있었다.
처음엔 상태관리 라이브러리 redux를 사용하는 컴포넌트인 줄 알았는데 그게 아니라 라이브러리를 의미하는 것이었다.
해당 라이브러리를 구글링했을때 정보가 거의 없고 공식문서의 예제를 보고 할때도 리액트 개념자체가 부족한 상황이었어서인지 쉽지 않았다.
그때 초보자가 동일한 기능에 대한 라이브러리를 선택할때는 많은 사람들이 사용하고 있는 라이브러리를 우선적으로 선택해야겠다고 생각했다.
- github / npm trends / 프론트엔트 커뮤니티 / 기술 블로그 등을 통해
기능, 성능, 라이브러리 사이즈, 인기, 최신 트렌드가 반영되었는지 등을 비교하고 선택
Moment.js
Date 라이브러리로 유명한 Moment.js 로 간단한 실습을 몇가지 진행하였다.
사용법은 간단했으나, 모멘트팀에서 새로운 자바스크립트의 흐름에 맞지 않아 더이상 업데이트를 안하기로 선언하며,
몇가지 다른 라이브러리들을 추천했다. (Luxon, Day.js, date-fns, js-Joda)
그래서 깊게 다루지 않았다.
Moment.js가 더이상 업데이트 하지 않는 이유
1. tree shaking 알고리즘이 제대로 작동하지 않음
2. mutable한 구조
3. 라이브러리의 size (기능이 많아서 엄청난 size)
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.
'ETC > 패캠환급챌린지(리액트)' 카테고리의 다른 글
패스트캠퍼스 챌린지 20일차 - 라이브러리 고르는 법 (0) | 2021.11.20 |
---|---|
패스트캠퍼스 챌린지 19일차 - 리액트 Date 라이브러리 비교(Day.js / date-fns / moment.js) (0) | 2021.11.19 |
패스트캠퍼스 챌린지 17일차 - 리액트 PropTypes 로 타입 검사하기 (0) | 2021.11.17 |
패스트캠퍼스 챌린지 16일차 - 리액트 Context (0) | 2021.11.16 |
패스트캠퍼스 챌린지 15일차 - 리액트 Memoization (0) | 2021.11.15 |