개인적으로 요즘 조급함이 생겨 학습한 것들에 대한 정리를 별도로 하질 못했었다.
react--> react-native로 사용 스택이 변경되면서 정리까지 해가며, 학습할 마음이 없었달까..
무튼 각설하고 나는 recoil, redux(thunk), Context API를 통해 상태를 관리해왔다.

그래서 하나씩 경험 의존적인 포스팅 해볼까 한다.

다른 블로그들이 더 잘 정리되어 있을테니 특별히 자세히 설명하지 않겠다.
사실 날 위한 포스팅이다.

Recoil

교육 때 처음 접해본 상태관리 라이브러리이다. 작성법이 간단하고 명확해서, redux를 잘 모르겠고,
상태의 흐름들을 특별히 조회(디버깅, 즉 작은 프로젝트라면) 할 필요 없다면, 써보는 것도 좋을 것 같다.

주요 키워드

1. atom - Recoil의 상태를 표현 (useState와 동일)

2. selector(options) - Recoil에서 함수나 파생된 상태

🚫 내가 느낀 바로는 저거 두개가 끝이다.
... atom을 통해 상태들을 관리하고 selector를 통해 함수들을 구현하는 것

소스 코드

//atom 구조
function atom<T>({
  key: string,						// atom 내부의 식별 Key
  default: T | Promise<T> | RecoilValue<T>,		// 상태의 기본값(Promise도 된다. 개꿀)

  effects_UNSTABLE?: $ReadOnlyArray<AtomEffect<T>>,

  dangerouslyAllowMutability?: boolean,
}): RecoilState<T>


//selector 구조
function selector<T>({
  key: string,						// atom(selector) 내부의 식별 Key			

  get: ({						// 파생되어 온 값을 평가하는 함수 즉 파생된 값에 따라 변경되는 값을 리턴한다.
    get: GetRecoilValue			
  }) => T | Promise<T> | RecoilValue<T>,

  set?: (						// 쓰기 가능한 상태를 반환
    {
      get: GetRecoilValue,				// 다른 atom이나 selector로 부터 값을 찾는데 사용되는 함수.
      set: SetRecoilState,				// 업스트림 Recoil 상태의 값을 설정할 때 사용되는 함수.
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
})

♦︎ TypeScript 토막 상식 (atom의 코드에서 설명하겠다.)

1. atom<T> : 'T'에 포함하는 어떤 형식으로든 받겠다.( generic 일반화 시키겠다.)
2. effects_UNSTABLE? : '?'가 붙은 데이터는 undefined 즉 있어도 되고 없어도 되는 옵션같은 느낌
3. default: T | Promise<T> | RecoilValue<T> : T 또는 Promise<T> 또는 RecoilValue<T> 형(구조)를 받아드린다.
4. : RecoilState<T> : ':' RecoilState<T> 인터페이스 구조를 상속받는다.

👆 위의 설명들이 틀리거나 혹은 포함관계 설명일 수 있다. 내가 이해기론 그렇다고...🥲

atom을 호출할때 자주 사용하는 Hook

1. useRecoilState(): atom을 읽고 쓰려고 할 때 이 Hook을 사용한다. 이 Hook는 atom에 컴포넌트을 등록하도록 한다.
2. useRecoilValue(): atom을 읽기만 할 때 이 Hook를 사용한다. 이 Hook는 atom에 컴포넌트를 등록하도록 한다.
3. useSetRecoilState(): atom에 쓰려고만 할 때 이 Hook를 사용한다.
4. useResetRecoilState(): atom을 초깃값으로 초기화할 때 이 Hook을 사용한다.

사실 구구절절 작성한거 같은데 Recoil은 Docs가 예술(한글화, 짧고 간단하게 설명)이므로
Recoil 공식 사이트 를 통해 학습하는게 좋을 것이다.

개인적으로 Recoil의 장점으로는 Redux에 비해 코드가 짧고, 구조적으로 간단하다는 것이다.
개발 할 때 우리는 조금이라도 손가락을 덜 움직이기 위해 코드를 줄이려 얼마나 노력하는가? 🤪
나온지 얼마 안된 기술이므로 계속해서 변경 및 추가가 되고 있는 HOT💥 한 상태관리 라이브러리다. 한번쯤은 사용해보는 것도 좋을 듯 싶다.