atom은 Recoil의 상태를 표현한다. atom() 함수는 쓰기 가능한 RecoilState객체를 반환한다.
function atom<T>({
key:string,
default:t | Promise<T> | RecoilValue<T>,
effects_UNSTABLE?; $ReadOnlyArray<AtomEffect<T>>,
dangerouslyAllowMutability?:boolean,
}):RecoilState<T>
atom을 읽고 쓰려고 할 때 사용. 이 Hook는 atom에 컴포넌트를 등록하도록 한다.
atom을 읽기만 할 때 사용한다. 이 Hooks는 atom에 컴포넌트를 등록하도록 한다.
atom에 쓰려고만 할 때 사용
atom을 초깃값으로 초기화할 때 사용
컴포넌트가 등록되지 않고 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>
);
}