[Review] FEConf Korea - 상태관리, 이제 Recoil 하세요
본 포스팅은, [FEConf Korea] Youtube 채널의 [상태관리, 이제 Recoil 하세요] 영상을 보고 작성한 리뷰입니다.
주의. Redux보다 Recoil이 좋다는 의견이 아닙니다.
1. 너도 나도 쓰는 Redux
1) 외부 저장공간(store)의 사용
2) 강한 제약사항
3) 번거로움
2. Recoil의 등장
도입배경
- 페이스북이 만들었다.
- 생각보다 훨씬 쉽고, 간결하게 사용할 수 있을 것 같았다.
핵심 컨셉
- React의 내부 상태만을 활용한다.
- 작은 Atom 단위로 관리
- 순수함수 selector
- re-render 최소화
- 데이터 흐름을 따라서
- 곧 새로운 React 기능과 호환성
예시
Modal 기능은 간단하지만, 열고 닫는 이벤트가 각 다른 컴포넌트에서 발생하기 때문에 상태관리가 필요한 부분이다.
- atom으로 modalState라는 상태를 정의하고, 여러 컴포넌트에서 useRecoilState(modalState)를 통해 Hooks처럼 호출해서 사용할 수 있다.
useRecoilState(atomName) : 특정 atom 상태 호출
useRecoilValue() : 읽기 전용 함수
- 리코일에서는 읽기 전용과 쓰기 전용 함수를 추가로 제공합니다.
useSetRecoilState() : 쓰기 전용 함수
useResetRecoilState() : 리셋함수 제공
selector : 파생된 상태를 위한 정의, get/set 제공
- selector는 특정 상태를 구독하여 상태의 변경이 발생하면, 파생되는 상태를 결과물로 반환해주는 순수함수 역할
- getter와 setter를 직접 정의할 수 있고, getter를 필수로 가지지만, setter는 선택적이다.
- getter만 정의된 selector는 Read-only로, 읽기 함수인 useRecoilValue()만 사용 가능하다.
Selector 예시
- filterState와 productState를 구독하여 filter가 변경되면, selector가 재평가되어 list를 새로 반환한다.
2. 비동기 데이터 다루기
에러 바운딩
1. React의 ErrorBoundary
2. loadable을 통해 값이 있을 때, 로딩 중일 때, 에러가 발생했을 때를 구분해서 처리 가능
server-client의 문제
- 캐싱된 데이터 말고 갱신된 데이터를 보여줘야한다.
비동기 갱신 방법
- 현재 Recoil에서는 request id를 통해 refresh하는 것을 권장
발표자는
- setProductState에 동일한 상태를 넘겨 id를 증가시키는 방식으로 업데이트를 하고 있음
최근 Recoil이 caching을 컨트롤할 수 있는 기능을 추가한다고 발표함