React Recoil의 대표적인 Hook API에 대해 알아보자 :)
📌 Recoil Hook API
📒 useRecoilState()
첫 요소가 상태의 값이며, 두번째 요소가 호출되었을 때 주어진 값을 업데이트하는 setter 함수인 튜플을 리턴한다.
이 hook은 암묵적으로 주어진 상태에 컴포넌트를 구독한다.
function useRecoilState<T>(state: RecoilState<T>): [T, SetterOrUpdater<T>=;
type SetterOrUpper<T> = (T | (T => T)) => void;state:atom혹은 쓰기 가능한 selector. 읽기 전용selector가get만 가지고 있을 때, 쓰기 가능한 selector는get과set을 정의에 가지고 있다.
이 API는 기본값 대신 React Recoil 상태를 인수로 받는 다는 점만 빼면 useState() hook과 비슷하다. 상태와 setter 함수의 최신 값의 튜플을 리턴한다. setter 함수는 새로운 값을 인수로 받거나 이전 값을 매개변수로 받는 updater 함수를 취한다.
📒 useRecoilValue()
주어진 Recoil 상태의 값을 리턴한다.
이 hook은 암묵적으로 주어진 상태에 컴포넌트에 구독한다.
function useRecoilValue<T>(state: RecoilValue<T>): T;state:atom혹은selector
이 hook은 읽기 전용 상태와 쓰기 가능 상태에서 모두 동작하므로 컴포넌트가 상태를 읽을 수만 있게 하고 싶을 때에 사용한다. selector가 읽기 전용이거나 쓰기 가능한 상태일 때, Atom은 쓰기 가능한 상태이다.
이 hook을 React 컴포넌트에서 사용하면 상태가 업데이트 될 때 리렌더링을 하도록 컴포넌트를 구독한다.
이 hook은 상태가 error를 가지고 있거나 보류중인 비동이기 resolution이 있다면 이를 던져 줄 수 있다.
📒 useSetRecoilState()
쓰기 가능한 Recoil 상태의 값을 업데이트하기 위한 setter 함수를 리턴한다.
function useSetRecoilState<T>(state: RecoilState<T>): SetterOrUpdater<T>;
type SetterOrUpdater<T> = (T | (T => T)) => void;state: 쓰기 가능한 Recoil 상태(atom혹은 쓰기 가능한selector)
상태를 변경하기 위해 비동기로 사용될 수 있는 setter 함수를 리턴한다. setter는 새로운 값이나 이전 값을 인수로 받는 updater 함수를 넘겨준다.
이 hook은 컴포넌트가 상태에 읽지 않고 쓰기만 하려고 할 때 사용된다. 만약 컴포넌트가 setter를 가져오기 위해 useRecoilState() hook을 사용한다면 업데이트를 구독하고 atom 혹은 selector가 업데이트되면 리렌더링을 한다. useSetRecoilState()를 사용하는 것은 컴포넌트가 값이 바뀔 때 리렌더링을 하기 위해 컴포넌트를 구독하지 않고도 값을 설정하게 해준다.
📒 useResetRecoilState()
주어진 상태를 default 값으로 리셋하는 함수를 반환한다.
useResetRecoilState()를 사용하는 것은 컴포넌트 상태가 변경될 때 리렌더링을 위해 컴포넌트를 구독하지 않고도 상태를 기본값으로 리셋할 수 있게 해준다.
function useResetRecoilState<T>(state: RecoilState<T>): () => void;state: 쓰기 가능한 Recoil 상태
📒 인용 출처
https://recoiljs.org/ko/docs/api-reference/core/useRecoilState
https://recoiljs.org/ko/docs/api-reference/core/useRecoilValue
https://recoiljs.org/ko/docs/api-reference/core/useSetRecoilState
https://recoiljs.org/ko/docs/api-reference/core/useResetRecoilState
