Atom 은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.
atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다.(atom의 state가 변경되면 render 된다는 의미) 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 렌더링 되는 결과가 발생한다.
export const toDoState = atom<ITodo[]>({
key: 'todo', *// unique ID (with respect to other atoms/selectors)*
default: [] *// default value (aka initial value)*
});
컴포넌트가 atom을 읽게 하기 위해서는 useRecoilValue()
컴포넌트가 atom을 쓰게 하기 위해서는 useSetRecoilState()
컴포넌트가 atom을 읽고, 쓰게 하기 위해서는 useRecoilState()
useRecoilState()는 useState()와 같다고 생각하면 된다.
const todos = useRecoilValue(toDoState);
const setTodos = useSetRecoilState(toDoState);
const [category, setCategory] = useRecoilState<Category>(toDoCategory);
<aside> 💡 atom값 할당 시 타입이 정해지지만, 제네릭을 사용해서 명시 해도 된다.
</aside>