Recoil : 리액트 전역상태관리 라이브러리

*상미튜터님 리코일 강의*

1. Atoms (데이터 변수 하나 만들어 놓기 => 다른 곳에서 사용 하기)

2.Selectors (atoms 값을 변형해서 사용 가능)

 

 

* 리덕스와 차이점

1) 리덕스 : 보일러 플레이트 코드를 많이 작성해야함 

2) 리코일 : 직관적이고 간단한 구조 (React의 useState 훅과 유사)

 

 

1. 설치

yarn add recoil

 

2. 설정

프로파이더 같은 recoilRoot로 감싸주기 -> 최상위 루트 컴포넌트를 ( App.jsx : Router 설정하는 구간에)

function App(){
return
	<RecoilRoot>
    	<Router/>
    </RecoilRoot>

 

3. 전역관리를 위한 변수 atom

- userId라는 이름을 다른 곳에서 쓸 건데, 여러 변수 중에 구분값은 키(key)야, default는 처음 초기값 느낌이야

 

 

4. 다른 페이지 사용시, useRecoilState를 사용하기

=> useState와 방법 동일함;

 

 

5. 자주 사용되는 hook

1) useRecoilState()  === useState와 유사

2) useRecoilValue() --> 값만 가져오기

3) useSetRecoilState() --> 값을 사용하지 않지만 값을 변경함

4) useResetRecoilState() --> 초기화해서 원상복구함

 

 

* 리액트쿼리 + 리코일 => QeuryClientProvider - ReocilRoot - Router 이렇게 감싸면 됨

 

* recoil-persist를 사용하면 새로고침해도 값이 증발하지 않음

effects_UNSTABLE: 

--> 알아서 local & session storage에 저장해줌

 

const {persistAtom} = recoilPersist({

key:"info",
storage : localStorage
})

>>이렇게 옵션값으로 설정해주기 가근ㅇ

 

 

***

로그인 유무확인 / 결제 정보를 기억해 놓고 ui를 분기처리

 

끝.