Recoil?
- React 프로젝트를 위한 상태관리 라이브러리
Recoil 핵심 컨셉
- 오직 React 내부 상태만 이용
- 작은 Atom 단위로 관리
- 순수함수 Selector 제공
- Re-Render 최소화
- 데이터 흐름을 따라서 여러상태들의 연결된 컴포넌트들을 유기적으로 관리 가능 (상호의존성)
- 추후 새로운 React 기능과 호환성
Read-only/Writable Function
- 읽기,쓰기 모두 가능한 Hook 을 이용하려고 하면 발생되는 오류를 미연에 방지하기 위해 읽기, 쓰기 함수를 구분하여 사용할 것을 권고
- 상태에 따른 직관적인 네이밍할 것
Suspense
- Recoil 에서 적극 사용 권장
- Indicator 컴포넌트 미리 생성한 뒤 콜백에 내려주면 사용 가능
- State 호출하는 컴포넌트를 감싸면 끝
- 만약 Suspense 가 싫다면 Loadable 기능 사용
- Loadale 이용 시 상태에 따라 관리 가능
Error Handling
- RecoilState가 비동기 통신 중에 오류가 발생하면 영역 전체가 렌더링 되지 못하는 문제 발생
- 비동기 데이터 핸들링 가능한 방법 2가지
- React에 에러 바운더리 감싸주기
- Loadable 이용하기
Recoil 에 비동기 state 는 한 번 호출되게 되면 무조건 캐싱하게 됨
트래픽 비용 절감 가능하나 데이터 갱신해줘야할 필요성 존재
비동기 데이터 갱신 방법
- 비동기 데이터 갱신에 영향을 주는 요소
- 내부에서 구독중인 다른 Recoil state 의 변경을 감지한 경우
- 요청 파라메터가 완전 새로운 값으로 변경된 경우
- Recoil 이 제안한 Request ID 를 이용한 명시적 갱신
- Setter 를 활용한 개선 버전
Atom 구독 공유 시 주의점
- 제약이 없어 어디서든 구독 가능한 atom 은 원치 않는 상황에서 다른 selector 에 의해 영향 받을 수 있음 -> private 로 정의할 것
- 여러 영역에서 공유가 필요하다면 의존 관계를 갖는 상태끼리 파일로 관리하거나 atomFamily 를 이용해 그룹화할 수 있는 값을 매개변수로 받아 grouping
Passionate about My Dreams