atom(options)

atom은 Recoil의 상태를 표현한다. atom() 함수는 쓰기 가능한 RecoilState객체를 반환한다.

function atom<T>({
  key:string,
  default:t | Promise<T> | RecoilValue<T>,
  
  effects_UNSTABLE?; $ReadOnlyArray<AtomEffect<T>>,
  
  dangerouslyAllowMutability?:boolean,
}):RecoilState<T>

key

• 내부적으로 atom을 식별하는데 사용되는 고유한 문자열
• 이 문자열은 어플리케이션 전체에서 다른 atom과 selector에 대해 고유해야함

default

• atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector

effects_UNSTABLE

• atom을 위한 선택적인 Atom Effects 배열.

dangerouslyAllowMutability

• Recoil은 atom을 이용해 다시 렌더링 되는 컴포넌트에 언제 알려햐 할지 알기위해 atom의 상태 변화에 의존한다. 만약 atom의 값이 변경될 경우, 이를 거치지 않고 등록된 컴포넌트에 제대로 알리지 않고 상태가 변경될 수 있다. 이를 방지하기 위해 저장된 모든 값이 변경되지 않는다. 경우에 따라 이 옵션을 사용하여 이 옵션을 재정의 할 수 있다.

atom과 상호작용하기 위해 가장 자주 사용되는 Hooks

useRocoilState()

atom을 읽고 쓰려고 할 때 사용. 이 Hook는 atom에 컴포넌트를 등록하도록 한다.

useRecoilValue()

atom을 읽기만 할 때 사용한다. 이 Hooks는 atom에 컴포넌트를 등록하도록 한다.

useSetRecoilState()

atom에 쓰려고만 할 때 사용

useResetRecoilState()

atom을 초깃값으로 초기화할 때 사용

useRecoilCallback()

컴포넌트가 등록되지 않고 atom의 값을 읽어야하는 드문경우에 사용

🧸 정적인 값으로 atom을 초기화 하거나 같은 유형의 값을 나타내는 Promise 또는 RecoilValue을 사용하여 원자를 초기화 할 수 있다.
왜냐하면 Promise가 보류 중 이거나 기본 selector가 비동기 일 수 있기 때문에 atom의 값도 보류 중이거나 읽을 때 오류를 발생시킬 수 있다는 것을 의미한다.
현재 atom을 설정할 때 Promise을 지정할 수 없다는 점에 유의해야한다.
비동기 함수를 사용하기 위해서는 selectors를 사용한다.

atom은 Promise나 RecoilValues를 직접 저장하는 데 사용할 수 없지만 객체를 감쌀 수도 있다.
Promises은 변경될 수 있다는 점에 유의해야한다.
Atom은 function로 설정할 수 있지만, 함수가 순수하다면, 그러기 위해서는 setter형태의 updater를 사용해야할 수도 있다. (예:set(myAtom, () => myFunc);)

예시

import {atom, useRecoilState} from 'recoil';

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

function Counter() {
  const [count, setCount] = useRecoilState(counter);
  const incrementByOne = () => setCount(count + 1);

  return (
    <div>
      Count: {count}
      <br />
      <button onClick={incrementByOne}>Increment</button>
    </div>
  );
}