Recoil Atom 학습

Atoms 소개

Atoms은 Recoil의 상태를 표현하는, Recoil 에서의 상태 단위이다.

Atoms이 업데이트되면 해당 Atom을 구독하고 있던 모든 컴포넌트가 업데이트된 Atom값을 참조하여 리렌더링 된다.

Atoms은 다음과 같이 Key,Value 값을 가지고 있으며 (es6의 Map을 사용한다고 함) 각 Atom은 자신의 고유한 Key 값으로 구분된다.
따라서 Atoms은 App 전체에서 다른 Atom과 Selector와 구분되는 자신만의 Key값을 가져야한다.

const counter = atom({
  key: 'myCounter',
  default: 0,
});

Atoms 사용법

Recoil Atoms을 생성하기 위해서는 atom() 함수를 호출해야하며 atom() 함수는 Writeable 한 RecoilState 객체를 반환한다.

function atom<T>({
  key: string,
  default: T | Promise<T> | RecoilValue<T>,

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

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

atom() 함수 옵션

• key : 위에 설명 함
• default : atom의 초깃값 또는 다른 atom 이나 selector 또는 Promise 객체
• effects_UnStable : atom을 위한 Atom Effects 배열
• dangerouslyAllowMutablity : atom의 값이 변경될 경우 등록된 컴포넌트에게 알리지 않고 리렌더링 되는 경우를 방지하기 위한 옵션 (atom에 저장된 모든 값이 변경되지 않도록 할 수 있음)

atom 비동기

Atom값을 초기화할때는 Promise 또는 같은 Atom인 RecoilValue 값으로 초기화 할 수 있다.
하지만 현재의 Atom을 설정할 때 Promise를 지정할 수 없다는 점을 조심해야한다.
따라서 비동기 함수를 사용하기 위해서는 Selectors를 사용해야한다 .

무슨말인지 이해는 안되지만 Promise 값으로 초기화는 가능하지만 setter를 이용해서 Atom의 Promise값을 저장하거나 getter로 Promise의 변경된 state값을 확인할 수 없다는 의미인거 같다 (pending -> fulfilled | reject )

atom을 위한 Hook

atom() 함수로 Atoms를 생성했다면 이제 사용을 해야한다.
먼저 counter라는 Atoms를 생성했다고 하자.

const counter = atom({
  key: 'myCounter',
  default: 0,
});

다음과 같은 훅을 통해 Atoms를 사용할 수 있다.
각 훅의 인자로 Atoms를 전달하면 된다.

1. useRecoilState()

atom을 읽고 쓰려고 할떄 사용.
이 훅을 사용하면 atom에 해당 컴포넌트를 등록한다.

useState() 훅과 비슷하지만 atom은 상태가 컴포넌트 간에 공유될 수 있다는 차이점이 있다.

 const [count, setCount] = useRecoilState(counter);
//count : readable Only
// setCount : writable Only

2.useRecoilValue()

atom을 읽을 때만 사용
위 예시에서 count만 사용하는 것과 같다.
이 훅 또한 atom에 해당 컴포넌트를 등록

const count = useRecoilValue(counter);
//count : readable Only

3. useSetRecoilState()

atom에 쓰려고 할 때만 사용
atom값을 업데이트 할 수 있는 setter함수를 리턴한다.
이떄 setter함수는 비동기로 사용될 수 있다.

컴포넌트를 atom에 등록하지 않기 떄문에 atom값이 변경된다 하더라도 리렌더링 되지 않는다.
따라서 무작정 useRecoilState() 훅만 사용하려고 하지말고(이 훅은 atom을 구독한다) atom값을 사용하지 않는다면 이 훅을 사용하자.

const setCount = useSetRecoilState(counter);
...<Button onClick={()=>{setCount(prev=>prev+1)}}>...

4. useResetRecoilState()

이 훅은 atom을 초깃값 (default) 로 초기화할 때 사용된다.

useSetRecoilState와 같이 비동기 setter 함수를 리턴하며 컴포넌트를 구독하지 않는다

  const resetList = useResetRecoilState(todoListState);
  return <button onClick={resetList}>Reset</button>;

5. useRecoilCallback()

이 훅은 useCallback() 훅과 비슷하지만 Recoil 상태에서도 callback이 동작하도록 한다.

이 훅은 Recoil 상태의 Readable-only Snapshot에 접근할 수 있는 callback 을 만들기 위해 사용될 수 있다 (주로 여기에 사용되는 거 같다)

아직 잘 이해는 되지 않지만 ( 리코일 고급 기술인 거 같다.) 다음과 같은 상황에서 쓰일 수 있다고 한다.

• atom 혹은 selector가 업데이트 될때 리렌더링 하기위해 컴포넌트를 구독하지않고 비동기적으로 Recoil 상태를 읽기위해
• 렌더링 할 때 수행하고 싶지 않은 비동기 동작을 연기할 떄
• pre-fetching을 진행할 때

참고 | 공식문서