Recoil이란?
전역 상태를 관리해주는 라이브러리입니다.
props로만 상태를 주고받는 불편함을 없애주기 위해서 생겼습니다.
atom
리코일에서 상태를 정의할 때 사용되는 가장 작은 단위입니다.
값을 저장하고 컴포넌트에서 불러와 사용할 수 있습니다.
selector
셀렉터는 아톰이나 다른 셀렉터의 값을 기반으로 파생된 상태를 계산하는 함수입니다.
아톰의 값을 가공하거나 여러 아톰을 조합해서 새로운 값을 만들 때 사용됩니다.
왜 쓰는건데?
- 원래는
props로 전달해서 컴포넌트끼리 상태를 계속 주고받았다면 리코일을 사용하여 전역으로 상태를 관리할 수 있어서 편리합니다. - 배우기도 쉽고 간편하여 바로 배우고 써먹을 수도 있습니다.(리액트
useState사용과 유사) - 렌더링 수를 최소화 할 수 있습니다.
사용방법
라우터 감싸기
RecoilRoot로 상태를 사용할 컴포넌트를 감싸줍니다.
아톰 생성하기
아톰을 생성할때는 지정 key가 필요합니다.
key는 아톰의 고유한 속성을 나타내줍니다.
default에는 아톰의 값들이 들어있습니다.
default를 객체나 리스트로 선언해서 사용하는것도 쌉가능!
아톰 사용하기
아톰을 useRecoilState를 이용해 불러옵니다.
countAtom을 import해와서 생성했던 아톰을 불러와줍니다.
default에 있는 값들을 사용할 수 있습니다.
setCount같이 defualt의 값들을 업데이트 시킬 수도 있습니다.
⭐️
useRecoilState아니여도 값만 사용하고 싶다면useRecoilValue를 추천합니다.
셀렉터 생성하기
셀렉터에도 고유한 key를 선언해줍니다.
get으로 아톰의 값을 가져와서 값을 가공시켜 리턴해줄 수 있습니다.
setCount같은거를 미리 선언할 수 있다고 볼 수 있죠.
셀렉터 사용하기
isEvenState를 useRecoilValue를 이용
해 값만 불러올 수 있습니다.
isEven에는 카운트될때마다 Odd, Even이 번갈아가며 나타나게됩니다.
셀렉터로는 이밖에도 비동기식도 처리할 수 있습니다.
마무리
이 리코일을 이용해서 전역상태를 깔끔하게 관리해봅시당 ㅎㅎㅎㅎㅎㅎ
