[React] Ep3. Recoil Hook

안녕하세요. 모리스입니다.😄

이번 포스트에서는 이전 포스트에서 언급했던 Recoil Hook에 대해서 작성해 보려합니다.

📒 useRecoilState()

주어진 Recoil 상태의 값과 그 상태를 업데이트하는 함수를 [value, setter] 형태의 튜플로 반환해요.
이 Hook은 해당 상태를 컴포넌트가 구독하도록 만들기 때문에, 상태가 바뀌면 자동으로 리렌더링이 돼요.

function useRecoilState<T>(state: RecoilState<T>): [T, SetterOrUpdater<T>];

type SetterOrUpdater<T> = (value: T | ((prev: T) => T)) => void;

• state: atom 또는 쓰기 가능한 selector

이 Hook은 React의 useState()와 사용법이 거의 같아요. 차이점은 Recoil 상태를 사용한다는 점뿐이에요.

---

📒 useRecoilValue()

주어진 Recoil 상태의 값만 반환하는 Hook이에요.
컴포넌트를 해당 상태에 구독시키며, 상태가 업데이트되면 리렌더링이 발생해요.

function useRecoilValue<T>(state: RecoilValue<T>): T;

• state: atom 또는 selector

상태를 읽기 전용으로만 사용하고 싶을 때 이 Hook을 사용하면 좋아요.
상태가 비동기라면 Promise가 resolve되기 전까지 Suspense 처리나 에러가 발생할 수 있어요.

---

📒 useSetRecoilState()

Recoil 상태를 업데이트할 수 있는 setter 함수만 반환하는 Hook이에요.
상태를 직접 읽지 않고 쓰기만 할 때 사용해요.

function useSetRecoilState<T>(state: RecoilState<T>): SetterOrUpdater<T>;

type SetterOrUpdater<T> = (value: T | ((prev: T) => T)) => void;

• state: 쓰기 가능한 atom 또는 selector

useRecoilState()를 쓰면 상태 변화에 따라 컴포넌트가 리렌더링 되지만,
useSetRecoilState()는 setter만 가져오므로 리렌더링이 발생하지 않아요.

---

📒 useResetRecoilState()

지정된 상태를 초기값으로 리셋할 수 있는 함수를 반환해요.
이 Hook 역시 컴포넌트를 상태에 구독하지 않아요.

function useResetRecoilState<T>(state: RecoilState<T>): () => void;

• state: 쓰기 가능한 atom 또는 selector

예를 들어, 로그아웃 시 사용자 상태를 초기화하거나, 필터나 폼 상태를 리셋할 때 유용하게 사용할 수 있어요.

---

📒 인용 출처

useRecoilState(state) | Recoil

 

useRecoilValue(state) | Recoil

 

useSetRecoilState(state) | Recoil

 

useResetRecoilState(state) | Recoil

 

잘 못되었거나 수정할 부분이 있다면 언제든 댓글로 혼내주시길 바랍니다.!!

오늘도 긴 글 읽어주셔서 감사합니다.😊