라이브러리는 개발 편의를 위한 도구의 모음 (공구)
프레임워크는 기반 구조까지 잡혀있음 (공장)
리액트는 도구 모음
JSX/ 컴포넌트의 상태 관리/ 렌더링 최적화/ 성능 확인
그 외에도 필요한 것들이 많다
이미 잘 만들어둔 도구들을 가져다가 쓰면서 리액트 생태계의 이점 누리기
라이브러리 적용 과정
필요>검색>사용법 파악>적용
1. 필요
특정 기능이 필요해짐(직접 구현하기에는 조금 벅참)
더 나은 도구가 필요해짐
트렌드에 따른 새로운 기술에 대한 호기심
2. 검색
필요 그대로를 검색
github/ npm trends/ 프론트엔드 커뮤니티/ 기술 블로그
유사한 라이브러리들을 후보로 비교(기능/성능/사이즈/인기/최신...)
3. 사용법 파악
공식 문서
github 코드 검색(실제 용례)
기술 블로그의 적용하기 예제
4. 적용
POC(Proof of concept)
프로젝트 일부에 적용
프로젝트 전체에 적용
Time/ Date 라이브러리
가벼운게 최우선이라면 Day.js
FP 패러다임을 따르거나 tree-shaking이 필요하다면 date-fns
스타일링 라이브러리
1. styled-components
css의 문제점을 해소하기 위해 나옴
스타일을 style 태그로 분리
styled.{element}``
상속
& 가상 엘리먼트/ 가상 선택자
전역스타일
attrs 기본으로 설정된 props를 바꾸고 addition
keyframes/ ThemProvider → Animation/ Theme
2. emotion
react에 특화 @emotion/react
jsx를 대체함
styled-component + @
css안에서 css 사용
Fallbacks, &, Global, keyframes
styled-components와 서로 점점 유사해짐
트렌드, 사이즈, 속도면에서 emotion이 우세한걸로 보임
3. sass
전처리기로 CSS의 확장
Sass/Scss 보다 CSS와 유사한 SCSS
variables/ modules/ mixin/ extend
UI 라이브러리
1. Onsen UI
스타일링 된 컴포넌트를 제공
기본적인 기능 Action Sheet
JS, Vue, React, Angular 모두 서포트
안드로이드/ 아이폰 대응
다양한 컴포넌트로 모바일 케이스를 대응
Font Awesome/ Ionicons
문서 최신화는 잘 안된다.
2. Ant Design
React 베이스
단순한 컴포넌트 제공 + @
다양한 사이즈의 Text
화면 구조를 간편하게 배
복붙만으로 화면 구성 가능
문서를 익히기 좋다
3. React Semantic UI
웹 접근성
리액트용으로 제공
변경을 바로 확인 가능
시맨틱한 태그 사용 가능
Comment/ Feed 다 만들어서 제공
웹 서비스 구성에 필요한 거의 모든
여러 컴포넌트 조합
4. React Bootstrap
반응형 웹 xs/ md/ lg
Sass @import해서 사용 가능
Bootstrap을 그대로 가져오기때문에 익숙하게 사용 가능
컬러시스템의 통일성
Admin 페이지에서 자주 본 스타일
Transitions/ Ratio
5. Material UI
구글이 선도한 디자인 시스템
Example Project/ Design Tools 다양한 서포트
실무 과정에서 마주할 이슈들이 잘 정리
체계화 된 시스템
Components/ API/ Demo API 구성
컴포넌트의 구조를 관장
Virtual scroll
순수한 커스텀 컴포넌트 생성 가능
애니메이션 라이브러리
1. React spring
물리엔진을 통해 좀 더 나은 애니메이션을 제공
2. Framer Motion
Design + Frontend Tool
Animation 기능이 들어간 Component
Propagation/ Orchestration
편의 기능들 제공
데이터 모킹 라이브러리 MSW(Mock Service Worker)
Mocking은 Mock(모의 데이터)을 만들어서 활용하는 방식이다.
통상적으로 data fetch 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다.
서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버으 역할을 해주는 무언가(데이터 fetch 해보기 강의에서는 github)가 필요
Service worker 활용
REST API/ GraphQL 모두 모킹이 가능
handler/ brower만 있어도 동작
상태관리 라이브러리
1. Redux
지역 상태 관리
단 방향 데이터(상태)흐름 Flux
구성요소 Store/ Reducer/ Action/ Selector
RTK Redux 라이브러리들 조합
immer/ saga/ thunk/ reselect
Redux Dev Tools
Hooks- useSelector/ useDispatch
비동기 작업
Redux-Thunk → Action으로 API 요청/결과 Store에 반영
2. Mobx
Derivative를 바꾸는 유일한 수단
Observable/ Observer
Simple
re-render issue(small component)
makeAutoObservable은 makeObservable을 보다 쉽게
runInAction/ flow
3. Recoil
React의 한계 해소
주요 개념은 atoms/ selectors
React Tree를 벗어난 3D shared state
Atoms는 공유되는 상태(get/set)
Selectors는 파생된 상태(get만 가능할수도..)
비동기 데이터 호출 async/ loadable
Async는 Suspense/ ErrorBoundary와 함께
4. Zustand
React와 완전 분리
useStore를 만들 수 있음(자유도)
커스텀 가능
메모제이션 with useCallback
Overwriting state set의 두번째 변수
Selector state를 토대로 계산하는 건 함수로
리액트 외부 혹은 바닐라에서도 동작
Redux devtool 사용 가능
set 이전에 비동기가 일어나도 ㅜ관
Redux-like/ Reacting to changes
Persist middleware
데이터 패칭 라이브러리
1. SWR(State-While-Revalidate)
HTTP 캐시 전략중 하나
의도적으로 캐시된 데이터를 리턴하고 패치한 후 데이터를 업데이트한다
키가 같다면 요청이 자동으로
중복제거,캐시,공유됨
사용자 포커스나 네트워크 재연결 시 갱신됨
뮤테이션은 useSWRConfig로부터 꺼낼 수 있고, 현재 데이터 기반으로 뮤테이트 가능
useSWR에서 직접 꺼내면 key 필요하지 않음
2. React-Query
기존 상태 관리 라이브러리에서 고려 X
Devtools 자체 도구가 존재
다양하게 참고 가능하다
Query Keys/ Query Fn
useQueries
Dependent/ Disable/ Pause
커스텀 가능
Paginated keepPreviousData
무한 스크롤 useInfiniteQuery
기본값 Placeholder/ Initial
Mutation Change data/ Invalidata/ set
