리코일

오로지 React를 위한 상태관리 라이브러리
contextAPI보다 간결하고 쉽게 작성할 수 있는 것이 특징
전역 상태를 관찰할 수 있고 어디서나 상태값을 읽을 수 있다
New! ES6부터 지원하는 최신 기술 (2020)

설치
npm install recoil
설치 방법

RecoilRoot
상태관리 하고자하는 컴포넌트의 부모에 RecoilRoot

<React.StrictMode>
<RecoilRoot>
  <App />
</RecoilRoot>
</React.StrictMode>

Atom

Atom : 상태(state)의 일부, 어떤 값을 저장하는 저장소
저장소 안에 있는 값을 업데이트 할 수도 있고 접근해서 값을 사용할 수도 있다.
값이 업데이트되면 아톰을 바라보고 있는 컴포넌트들도 재랜더링 된다. 여러 컴포넌트가 공유하는 것도 가능.
Atom은 리코일에서 제공하는 함수, 함수에 인자로 객체를 전달
하나는 키, 하나는 디폴트

아톰은 전역 공간에 있기 때문에 키값은 중복이 되어서는 안 된다
아톰이 저장할 값은 디폴트에 들어가게 된다
아톰 안에 있는 값에 접근하기 위한 함수 useRecoilValue <- 값을 가져오기만 함
컴포넌트가 atom을 읽고 쓰게 하는 함수 useRecoilState() <- 값을 설정할 수 있음

useState랑 사용 방법은 똑같음
관리할 값은 fontSizeState라는 아톰이고, fontSizeState라는 아톰을 가져오고 싶으면 인자로 넘겨주기~

이렇게 해도 작동은 똑같다

Selector

Selector : 파생된 상태(derived state)의 일부
파생된 상태는 상태의 변화
파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물
순수 함수? 입력값과 출력값 동일한 함수, 외부 값에 영향을 미치지 않음
ex)

즉, Selector는 중간기지 역할만 한다. atom 값을 가공하거나 필터링하는 역할. 전달하는 아톰 값에 따라 똑같은 값을 반환해야한다! 가지고 오는 아톰값을 변경해서는 안되고 할 필요도 없다.

Selector 함수가 좋은 이유?
아톰 값이 변경되면 Selector가 자동으로 실행
필터링도 자동으로 실행
값을 추가했을 때도 wow

라이브러리마다 어떤 기능을 제공하는지는 다 다르고, 얼마나 많은 사람들이 사용하는지도 중요하다. 지금은 redux가 압도적인 1위를 차지하고 있는 상태.
하지만 리코일은 facebook에서 만들었고 같은 회사에서 개발한 것이기 때문에 궁합이 좋다. 지금은 부족할 수 있지만 미래가 밝을 수밖에 없고 앞으로 계속 발전할 가능성이 많다!
Top 6 React State Management Libraries For 2022