프로젝트 세팅

recoil 써보장

재원쓰 2022. 8. 30. 18:28

atom : 화면전체에 공유가능한 기본 데이터를 정의하는 기능. { key, default } 가 들어가며, default에 정의한 데이터를 여기저기 불러올 수 있다.

selector : 데이터를 읽고 쓸 때, 유효성 검사 등 부수적인 로직을 추가할 수 있다. selector 내부에서도 다른 atom이나 selector를 참조할 수 있다(구독). 이렇게 구독하고있는 상태가 외부에서 변경되면 본 selector는 이를 감지하고 컴포넌트를 리렌더링을 해준다. 필수로 정의하는 { get } 함수와 선택적으로 정의하는 { set } 함수가 있다.

읽기전용 vs 쓰기전용?

만약 get 만 정의된 selector를 사용한다고 할 때, 읽기 쓰기 모두 가능한 훅을 이용하면 발생하는 오류를 미연에 방지하기 위해서 함수를 구분해서 쓰도록 권고하고 있다.

 

 

import { useRecoilRefresher_UNSTABLE, useSetRecoilState } from 'recoil';
 
useRecoilState : 리코일에 저장된 default 값을 가져온다.
useSetRecoilState :  API를 통해 불러온 데이터를 기존에 저장된 default 값과 교체해준다. 
useRecoilValue : useRecoilState와 비슷하지만 '읽기전용'이다.
useResetRecoilState : 변경되었던 리코일 default 값을 기존 값으로 초기화시켜준다. 컴포넌트가 언마운트 되는 시점에 이 값을 초기화해주지 않으면 향후 신규 등록시 기존데이터가 그대로 불러와지는 오류가 발생하게 된다.
 

 

selector