[Recoil] 주요 API - (2)
useRecoilState()
Atom을 읽고 쓸 때 사용한다.
const counterState = atom({
key: "counterState",
default: 0,
});
const [counter, setCounter] = useRecoilState(counterState);
const onIncrement = () => setCounter((prev) => prev + 1); // counter increases
useRecoilValue()
Atom의 값을 반환하고 컴포넌트를 해당 atom에 구독한다.
const userState = atom({
key: "userState",
default: { name: "moon", age: "20" },
});
const user = useRecoilValue(userState);
console.log(user.name, user.age); // moon, 20
useSetRecoilState()
쓰기 가능한 Atom을 업데이트하기 위한 setter 함수를 반환한다.
const userState = atom({
key: "userState",
default: { name: "moon", age: "20" },
});
const setUserState = userSetRecoilState(userState);
setUserState((prev) => ({ ...prev, name: "ga" })); // name change to "ga"
useResetRecoilState()
Atom을 기본값으로 리셋하고 컴포넌트를 해당 atom에 구독한다.
const userState = atom({
key: "userState",
default: { name: "moon", age: "20" },
});
const setUserState = userSetRecoilState(userState);
const resetUserState = useResetRecoilState(userState);
setUserState((prev) => ({ ...prev, name: "ga" })); // name changed to "ga"
resetUserState(userState); // name reset to "moon"
useRecoilStateLoadable()
비동기 selector로부터 상태를 불러올 때, 상태가 불러와질 때까지 대기하고 setter가 포함된 Loadable 객체를 반환한다.
const [userState, setUserState] = useRecoilStateLoadable(
fetchUserState(userID)
);
switch (userState.state) {
case "hasValue":
return <div>{userState.contents.name}</div>;
case "loading":
return <div>Loading...</div>;
case "hasError":
throw userState.contents;
}
useRecoilValueLoadable()
useRecoilStateLoadable()과 유사하지만 setter가 포함되지 않은 Loadable 객체를 반환한다.
const userState = useRecoilValueLoadable(fetchUserState(userID));
switch (userState.state) {
case "hasValue":
return <div>{userState.contents.name}</div>;
case "loading":
return <div>Loading...</div>;
case "hasError":
throw userState.contents;
}
참고: Recoil 공식 문서