나만의 개발 공간

Recoil 래퍼런스 API 상태 정리 본문

React

Recoil 래퍼런스 API 상태 정리

kkhcode 2023. 9. 6. 17:38

매번 공식 문서를 보는 것도 중요하지만 자주 쓰는 부분은 문서를 보고 작성하려한다.

atom(options)

atom은 Recoil의 상태를 표현한다. atom() 함수는 쓰기 가능한 RecoilState 객체를 반환한다.

function atom<T>({
	key: string,
    default: T | Promise<T> | RecoilValue<T>,

	effects_UNSTABLE?: $ReadOnlyArray<AtomEffect<T>>,

 	dangerouslyAllowMutability?: boolean,
}): RecoilState<T>
  • key - 내부적으로 atom을 식벽하는데 사용되는 고유한 문자열. 이 문자열은 어플리케이션 전체에서 다른 atom과 selector에 대해 고유해야 한다.
  • default - atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector.
  • effects_UNSTABLE - atom을 위한 선택적인 Atom Effects 배열
  • dangerouslyAllowMutability - Recoil은 atom을 이용해 다시 렌더링 되는 컴포넌트에 언제 알려야 할지 알기 위해 atom의 상태 변화에 의존한다. 만약 atom의 값이 변경될 경우, 이를 거치지 않고 등록된 컴포넌트에 제대로 알리지 않고 상태가 변경될 수 있다. 이를 방지하기 위해 저장된 모든 값이 변경되지 않는다. 경우에 따라 이 옵션을 사용하여 이 옵션을 재정의할 수 있다.

atom과 상호작용하기 위해 가장 자주 사용되는 Hooks:

  • useRecoilState(): atom을 읽고 쓰려고 할 때 이 Hook을 사용한다. 이 Hook은 atom에 컴포넌트를 등록하도록 한다.
  • useRecoilValue(): atom을 읽기만 할 때 이 Hook을 사용한다. 이 Hook은 atom에 컴포넌트를 등록하도록 한다.
  • useSetRecoilState(): atom에 쓰려고만 할 때 이 Hook을 사용한다.
  • useResetRecoilState(): atom을 초깃값으로 초기화할 때 이 Hook을 사용한다.

컴포넌트가 등록되지 않고 atom의 값을 읽어야 하는 드문 경우는 useRecoilCallback()을 참조하면 된다.

정적인 값으로 atom을 초기화하거나 같은 유형의 값을 나타내는 Promise 또는 RecoilValue을 사용하여 원자를 초기화할 수 있다. 왜냐하면 Promise가 보류 중이거나 기본 selector가 비동기일 수 있기 때문에 atom의 값도 보류 중이거나 읽을 때 오류를 발생시킬 수 있다는 것을 의미한다. 현재 atom을 설정할 때 Promise을 지정할 수 없다는 점에 유의해야 한다. 비동기 함수를 사용하기 위해서는 selectors를 사용한다.

 

atom은 Promise 나 RecoilValues를 직접 저장하는 데 사용할 수 없지만 객체를 감쌀 수도 있다. Promise는 변경될 수 있다는 점에 유의해야 한다. 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>
  );
}

 

selector(options)

Selector은 Recoil에서 함수나 파생된 상태를 나타낸다. 주어진 종속성 값 집합에 대해 항상 동일한 값을 반환하는 부작용이 없는 "순수함수"라고 생각하면 된다. get함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly객체를 반환한다. set함수 또한 제공되면 Selector는 쓰기 가능한 RecoilState객체를 반환한다.

function selector<T>({
  key: string,

  get: ({
    get: GetRecoilValue
  }) => T | Promise<T> | RecoilValue<T>,

  set?: (
    {
      get: GetRecoilValue,
      set: SetRecoilState,
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
})
type ValueOrUpdater<T> =
  | T
  | DefaultValue
  | ((prevValue: T) => T | DefaultValue);
type GetRecoilValue = <T>(RecoilValue<T>) => T;
type SetRecoilState = <T>(RecoilState<T>, ValueOrUpdater<T>) => void;
type ResetRecoilState = <T>(RecoilState<T>) => void;
  • key - 내부적으로 atom을 식별하는데 사용되는 고유한 문자열. 이 문자열은 어플리케이션 전체에서 다른 atom과 selector에 대해 고유해야 한다. 지속성을 위하여 사용된다면 실행 전반에 걸쳐 안정적일 필요가 있다.
  • get - 파생된 상태의 값을 평가하는 함수. 값을 직접 반환하거나 비동기적인 Promise나 또는 같은 유형을 나타내는 다른 atom이나 selector를 반환할 수 있다. 첫 번째 매개변수로 다음 속성을 포함하는 객체를 전달한다:
    • get - 다른 atom이나 selector로부터 값을 찾는데 사용되는 함수. 이 함수에 전달된 모든 atom과 selector는 암시적으로 selector에 대한 의존성 목록에 추가된다. Selector의 의존성이 변경되면 Selector가 다시 평가된다.
  • set? - 이 속성이 설정되면 selector는 쓰기 가능한 상태를 반환한다. 첫번째 매개변수로 콜백 객체와 새로 입력 값이 전달된다. 사용자가 selector를 재설정할 경우 새로 입력 값은 T 타입의 값 또는 DefaultValue 타입의 객체일 수 있다. 콜백에는 다음이 포함된다.:
    • get - 다른 atom이나 selector로부터 값을 찾는데 사용되는 함수. 이 함수는 selector를 주어진 atom이나 selector를 구독하지 않는다.
    • set - 업스트림 Recoil 상태의 값을 설정할 때 사용되는 함수. 첫 번째 매개변수는 Recoil 상태, 두 번째 매개변수는 새로운 값이다. 새로운 값은 업데이트 함수나 재설정 액션을 전파하는 DefalutValue 객체일 수 있다.
  • dangerouslyAllowMutability - Selector는 파생된 상태의 "순수 함수"를 나타내며 항상 동일한 의존성 입력 값 집합에 대하여 동일한 값을 반환해야 한다. 이를 보호하기 위해 selector에 저장된 모든 값은 기본적으로 고정되어 있다. 경우에 따라 이 옵션을 사용하여 재정의해야 할 수 있다.

단순한 정적인 의존성이 있는 Selector:

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => get(myAtom) * 100,
});

동적 의존성

읽기만 가능한 selector는 의존성을 기준으로 selector의 값을 평가하는 get 메서드를 갖는다. 의존성 중 어떠한 것이 업데이트 되면 selector는 다시 평가된다. Selector를 평가할 때 실제로 사용하는 atom이나 selector를 기반으로 의존성이 동적으로 결정된다. 이전 의존성의 값에 따라 다른 추가적인 의존성을 동적으로 사용할 수 있다. Recoil은 Selector가 현재 업데이트되어진 의존성 집합만 구독하도록 현재 데이터 흐름 그래프를 자동적으로 업데이트한다.

아래 예시에서 mySelector는 toggleState atom뿐만 아니라 toggleState에 의존하는 selectorA 또는 selectorB selector도 의존한다.

const toggleState = atom({key: 'Toggle', default: false});

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => {
    const toggle = get(toggleState);
    if (toggle) {
      return get(selectorA);
    } else {
      return get(selectorB);
    }
  },
});

쓰기 가능한 Selector

양방향 selector는 입력 값을 매개변수로 받고 데이터 흐름 그래프를 따라 업스트림에서 변경사항을 전파하는 데 사용할 수 있다. 사용자가 selector를 새 값으로 설정하거나 selector를 재설정할 수 있기 때문에 입력 값은 selector가 나타내는 타입과 동일하거나 재설정 작업을 나타내는 DefaultValue 객체 중 하나이다.

 

이 간단한 selector는 기본적으로 atom을 감싸서 필드를 추가한다. 이것은 단지 설정과 재설정 작업을 업스트림 atom까지 통과한다.

const proxySelector = selector({
  key: 'ProxySelector',
  get: ({get}) => ({...get(myAtom), extraField: 'hi'}),
  set: ({set}, newValue) => set(myAtom, newValue),
});

이 selector는 데이터를 변환하므로 입력 값이 DefaultValue인지 확인해야 한다.

const transformSelector = selector({
  key: 'TransformSelector',
  get: ({get}) => get(myAtom) * 100,
  set: ({set}, newValue) =>
    set(myAtom, newValue instanceof DefaultValue ? newValue : newValue / 100),
});

비동기 Selector

Selector는 또한 비동기 평가 함수를 가지고 있으며 Promise를 출력값으로 반환할 수 있다. 자세한 정보는 이 가이드를 보면 된다.

const myQuery = selector({
  key: 'MyQuery',
  get: async ({get}) => {
    return await myAsyncQuery(get(queryParamState));
  },
});

예시 (동기)

import {atom, selector, useRecoilState, DefaultValue} from 'recoil';

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) =>
    set(
      tempFahrenheit,
      newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32,
    ),
});

function TempCelcius() {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  const [tempC, setTempC] = useRecoilState(tempCelcius);
  const resetTemp = useResetRecoilState(tempCelcius);

  const addTenCelcius = () => setTempC(tempC + 10);
  const addTenFahrenheit = () => setTempF(tempF + 10);
  const reset = () => resetTemp();

  return (
    <div>
      Temp (Celcius): {tempC}
      <br />
      Temp (Fahrenheit): {tempF}
      <br />
      <button onClick={addTenCelcius}>Add 10 Celcius</button>
      <br />
      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
      <br />
      <button onClick={reset}>Reset</button>
    </div>
  );
}

예시 (비동기)

import {selector, useRecoilValue} from 'recoil';

const myQuery = selector({
  key: 'MyDBQuery',
  get: async () => {
    const response = await fetch(getMyRequestUrl());
    return response.json();
  },
});

function QueryResults() {
  const queryResults = useRecoilValue(myQuery);

  return <div>{queryResults.foo}</div>;
}

function ResultsSection() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <QueryResults />
    </React.Suspense>
  );
}

class Loadable

Loadable 객체는 Recoil atom 혹은 selector의 최신 상태를 대표합니다. 이 상태는 사용가능한 값을 가지고 있거나 에러 상태이거나 혹은 여전히 비동기 해결 보류 중일 수 있습니다. Loadable 은 다음의 인터페이스를 가집니다.

  • state: atom 혹은 selector의 최신 상태입니다. 가능한 값은 'hasValue', 'hasError', 혹은 'loading' 입니다.
  • contents: Loadable에 의해서 대표되는 값입니다. 만약 상태가 hasValue 라면, 이는 실제 값입니다. 만약 상태가 hasError 라면 이는 던져진 Error 객체입니다. 그리고 만약 상태가 'loading'이라면 toPromise()를 사용하여 값의 Promise를 얻을 수 있습니다.

Loadable은 최신 상태에 접근하기 위한 도우미 메서드를 가지고 있습니다. 이 API는 아직 불안정합니다:

  • getValue() - React Suspense와 Recoil selectors의 시맨틱에 매치되는 값에 접근하기 위한 메서드. 만약 상태가 값을 가지고 있다면 값을 리턴하며, error를 가지고 있다면 해당 error를 던집니다. 만약 여전히 보류중이라면 실행을 연기하거나 보류중인 상태를 전파하기 위해 리렌더링합니다.
  • toPromise(): selector가 resolve되면 resolve될 Promise 를 리턴합니다. selector가 동기이거나 이미 resolve된 상태라면, 즉시 resolve 되는 Promise 를 리턴합니다.
  • valueMaybe() - 가능하다면 값을 리턴하며 다른 경우에는 undefined 를 리턴합니다.
  • valueOrThrow() - 가능하다면 값을 리턴하거나 Error를 던집니다.
  • map() - Loadable의 값을 변형하기 위한 함수를 받으며 새로운 Loadable을 변형된 값과 함께 리턴합니다. 변형 함수는 값의 매개변수를 받아 새로운 값을 리턴합니다. 던져진 에러나 suspense를 전파할 수도 있습니다.

Example

function UserInfo({userID}) {
  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

useRecoilState(state)

첫 요소가 상태의 값이며, 두번째 요소가 호출되었을 때 주어진 값을 업데이트하는 setter 함수인 튜플을 리턴합니다.

이 hook은 암묵적으로 주어진 상태에 컴포넌트를 구독합니다.

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

type SetterOrUpdater<T> = (T | (T => T)) => void;
  • state: atom 혹은 쓰기가능한 selector. 읽기 전용 selector가 get만 가지고 있을 때, 쓰기가능한 selector는 get 과 set 를 정의에 가지고 있습니다.

이 API는 기본값 대신 React Recoil 상태를 인수로 받는 다는 점만 빼면 useState() hook과 비슷합니다. 상태와 setter 함수의 최신 값의 튜플을 리턴합니다. setter 함수는 새로운 값을 인수로 받거나 이전 값을 매개변수로 받는 updater 함수를 취합니다.

이 hook은 컴포넌트가 상태를 읽고 쓰려고 할 때에 권장합니다.

 

이 hook을 React 컴포넌트에서 사용하면 상태가 업데이트 되었을 때 리렌더링을 하도록 컴포넌트를 구독합니다. 이 hook은 상태가 error를 가지고 있거나 보류중인 비동기 resolution을 던져 줄 있습니다. 다음의 가이드를 참고해주세요.

 

Example

import {atom, selector, useRecoilState} from 'recoil';

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelsius = selector({
  key: 'tempCelsius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
});

function TempCelsius() {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  const [tempC, setTempC] = useRecoilState(tempCelsius);

  const addTenCelsius = () => setTempC(tempC + 10);
  const addTenFahrenheit = () => setTempF(tempF + 10);

  return (
    <div>
      Temp (Celsius): {tempC}
      <br />
      Temp (Fahrenheit): {tempF}
      <br />
      <button onClick={addTenCelsius}>Add 10 Celsius</button>
      <br />
      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
    </div>
  );
}

 

useRecoilValue(state)

주어진 Recoil 상태의 값을 리턴합니다.

이 hook은 암묵적으로 주어진 상태에 컴포넌트를 구독합니다.

function useRecoilValue<T>(state: RecoilValue<T>): T;
  • state: atom 혹은 selector

이 hook는 읽기 전용 상태와 쓰기 가능 상태에서 모두 동작하므로 컴포넌트가 상태를 읽을 수만 있게 하고 싶을 때에 추천하는 hook입니다. selector가 읽기 전용이거나 쓰기 가능한 상태일 때, Atom은 쓰기 가능한 상태입니다. 더 많은 정보를 원하신다면 selector() 를 참고하세요.

이 hook을 React 컴포넌트에서 사용하면 상태가 업데이트 될 때 리렌더링을 하도록 컴포넌트를 구독합니다. 이 hook은 상태가 error를 가지고 있거나 보류중인 비동기 resolution이 있다면 이를 던져 줄 수 있습니다. 다음의 가이드를 참고해주십시오.

 

Example

import {atom, selector, useRecoilValue} from 'recoil';

const namesState = atom({
  key: 'namesState',
  default: ['', 'Ella', 'Chris', '', 'Paul'],
});

const filteredNamesState = selector({
  key: 'filteredNamesState',
  get: ({get}) => get(namesState).filter((str) => str !== ''),
});

function NameDisplay() {
  const names = useRecoilValue(namesState);
  const filteredNames = useRecoilValue(filteredNamesState);

  return (
    <>
      Original names: {names.join(',')}
      <br />
      Filtered names: {filteredNames.join(',')}
    </>
  );
}

useSetRecoilState(state)

쓰기 가능한 Recoil 상태의 값을 업데이트하기 위한 setter 함수를 리턴합니다.

  • state: 쓰기 가능한 Recoil 상태 ( atom 혹은 쓰기 가능한 selector )

상태를 변경하기 위해 비동기로 사용될 수 있는 setter 함수를 리턴합니다. setter는 새로운 값이나 이전 값을 인수로 받는 updater 함수를 넘겨줍니다.

이 hook은 컴포넌트가 상태에 읽지 않고 쓰기만 하려고 할 때 추천합니다. 만약 컴포넌트가 setter를 가져오기 위해 useRecoilState() hook을 사용한다면 업데이트를 구독하고 atom 혹은 selector가 업데이트되면 리렌더링을 합니다. useSetRecoilState()을 사용하는 것은 컴포넌트가 값이 바뀔 때 리렌더링을 하기 위해 컴포넌트를 구독하지 않고도 값을 설정하게 해줍니다.

 

Example

import {atom, useSetRecoilState} from 'recoil';

const namesState = atom({
  key: 'namesState',
  default: ['Ella', 'Chris', 'Paul'],
});

function FormContent({setNamesState}) {
  const [name, setName] = useState('');
  
  return (
    <>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setNamesState(names => [...names, name])}>Add Name</button>
    </>
)}

// This component will be rendered once when mounting
function Form() {
  const setNamesState = useSetRecoilState(namesState);
  
  return <FormContent setNamesState={setNamesState} />;
}

useResetRecoilState(state)

주어진 상태를 default 값으로 리셋하는 함수를 반환합니다.

useResetRecoilState()를 사용하는 것은 컴포넌트가 상태가 변경될 때 리렌더링을 위해 컴포넌트를 구독하지 않고도 상태를 기본값으로 리셋할 수 있게 해줍니다.

function useResetRecoilState<T>(state: RecoilState<T>): () => void;
  • state: 쓰기 가능한 Recoil 상태

 

Example

import {todoListState} from "../atoms/todoListState";

const TodoResetButton = () => {
  const resetList = useResetRecoilState(todoListState);
  return <button onClick={resetList}>Reset</button>;
};

* 여기부터는 사용해본 적이 없는 hook이므로 해석보단 참고위주로 보되 개인 프로젝트나 테스트로 실습해보기

useRecoilStateLoadable(state)

이 hook은 비동기 selector의 값을 읽기 위해서 사용됩니다. 이 hook은 암묵적으로 주어진 상태에 컴포넌트를 구독합니다.

useRecoilSate()와 다르게 이 hook은 비동기 selector에서 읽어올 때 (React Suspense와 함께 작동하기 위해) Error 혹은 Promise를 던지지 않습니다. 대신 이 hook은 Loadable객체를 setter 콜백과 함께 리턴합니다.

function useRecoilStateLoadable<T>(state: RecoilState<T>): [Loadable<T>, (T | (T => T)) => void]
  • state: 비동기 작업이 있을 수 있는 쓰기 가능한 atom 혹은 selector. 리턴된 loadable의 상태(status)는 제공된 상태(state) selector의 상태(status)에 따라 다릅니다.

인터페이스가 있는 현재 상태 Loadable을 리턴합니다.

  • state: selector의 상태(status)를 나타냅니다. 가능한 값은 'hasValue', 'hasError', 'loading'입니다.
  • contents: 이 Loadable이 나타내는 값입니다. 만약 상태가 hasValue이면 이는 실제 값이며, 만약 상태가 hasError라면 이는 던져진 Error객체입니다. 또한 상태가 loading이면 값의 Promise입니다.

Example

function UserInfo({userID}) {
  const [userNameLoadable, setUserName] = useRecoilStateLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

useRecoilValueLoadable(state)

이 hook은 비동기 selector의 값을 읽기 위해 사용합니다. 이 hook은 주어진 상태에 컴포넌트를 암묵적으로 구독합니다.

useRecoilValue()와는 다르게 이 hook은 비동기 selector에서 읽어올 때 (React Suspense와 함께 작동하기 위해) Error 혹은 Promise를 던지지 않습니다. 대신 이 hook은 값에 대한 Loadable객체를 리턴합니다.

function useRecoilValueLoadable<T>(state: RecoilValue<T>): Loadable<T>
  • state: 비동기 작업이 있을 수 있는 atom 혹은 selector 리턴된 loadable의 상태(status)는 제공된 상태(state) selector의 상태(status)에 따라 다릅니다.

인터페이스가 있는 현재 상태 Loadable을 리턴합니다.

  • state: selector의 상태(status)를 나타냅니다. 가능한 값은 'hasValue', 'hasError', 'loading'입니다.
  • contents: 이 Loadable이 나타내는 값입니다. 만약 상태가 hasValue이면 이는 실제 값이며, 만약 상태가 hasError라면 이는 던져진 Error객체입니다. 또한 상태가 loading이면 값의 Promise입니다.

Example

function UserInfo({userID}) {
  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

useGetRecoilValueInfo_UNSTABLE()

이 훅은 컴포넌트가 하나의 atom 혹은 selector의 현재 상태와 값 그리고 기타 다른 정보들을 살펴볼("peek") 수 있도록 한다. 이 훅은 Snapshot의 getInfo_UNSTABLE() 메소드와 유사하다.

function useGetRecoilValueInfo_UNSTABLE(): RecoilValue<T> => AtomInfo<T>;

interface AtomInfo<T> {
  loadable?: Loadable<T>;
  isActive: boolean;
  isSet: boolean;
  isModified: boolean; // [TODO] 수정된 selectors에 대해서도 표시할 수 있도록 해야한다. 현재는 atom의 수정 여부만 표기된다.
  type: 'atom' | 'selector' | undefined; // 일단 지금은, 초기화될 때까지는 undefined를 지닌다.
  deps: Iterable<RecoilValue<T>>;
  subscribers: {
    nodes: Iterable<RecoilValue<T>>,
    components: Iterable<ComponentInfo>,
  };
}

interface ComponentInfo {
  name: string;
}

이 훅은 RecoilValue<T>를 전달받아 해당 atom/selector의 현재 정보가 포함된 객체를 반환하는 함수를 제공한다. 이 훅은 상태를 변화시키거나 새로운 구독을 만들지 않으며, 주로 디버깅 또는 개발 도구에 사용된다.

디버그 정보에 대한 내용은 발전 중에 있지만, 다음 요소들은 아마 포함될 것이다:

  • loadable - 현재 상태를 지닌 하나의 Loadable 객체. getLoadable() 메소드와는 다르게 이 메소드는 스냅샷(snapshot)을 전혀 변형시키기 않는다. 단순히 현재 상태를 제공하며, 새로운 atoms/selectors를 초기화하거나, 새로운 selector 평가를 수행하거나, 종속성 또는 구독을 업데이트하진 않는다.
  • isSet - 스냅샷 상태(snapshot state)에 저장된 명확한 값을 가진 atom인 경우 True, selector이거나 default atom 상태를 사용하는 경우 False
  • isModified - 마지막 트랜잭션 이후 수정된 atom인 경우 True
  • type - atom 또는 selector 중 하나
  • deps - 이 노드가 의존하고 있는 atoms 혹은 selectors를 담은 iterator 객체
  • subscribers - 이 스냅샷 내에서 어떤 항목들이 이 노드를 구독하고있는 지에 대한 정보. 자세한 사항은 개발중이다.

예시

function ButtonToShowCurrentSubscriptions() {
  const getRecoilValueInfo = useGetRecoilValueInfo_UNSTABLE();
  function onClick() {
    const {subscribers} = getRecoilValueInfo(myAtom);
    console.debug(
      'Current Subscriber Nodes:',
      Array.from(subscribers.nodes).map(({key}) => key),
    );
  }

  return <button onClick={onClick}>See Current Subscribers</button>;
}

useRecoilRefresher_UNSTABLE(state)

useRecoilRefresher_UNSTABLE() 훅은 연관된 모든 캐시를 삭제하고 selector를 호출할 수 있는 콜백을 반환합니다. selector가 비동기 요청을 하면 재평가하고 새롭게 요청을 합니다. 예를 들어, 최신 데이터로 업데이트하거나 오류가 나서 다시 시도하는 경우에 유용합니다. (참조 Asynchronous Data Queries Guide)

 

useRecoilCallback() 이나 selector의 getCallback()를 사용해 캐시를 새로 고칠 수도 있습니다.

type Refresher = () => void;

function useRecoilRefresher_UNSTABLE(state: RecoilValue): Refresher

atom은 새로고침되지 않으며, 현재 상태를 유지합니다. selectors는 캐시를 지웁니다. selector는 주로 추상화로 사용하기 때문에 selector를 새로 고치면 연관된 모든 selector의 캐시가 재귀적으로 새로 고쳐집니다.

Example

const myQuery = selector({
  key: 'MyQuery',
  get: () => fetch(myQueryURL),
});

function MyComponent() {
  const data = useRecoilValue(myQuery);
  const refresh = useRecoilRefresher_UNSTABLE(myQuery);

  return (
    <div>
      Data: {data}
      <button onClick={() => refresh()}>Refresh</button>
    </div>
  );
}

isRecoilValue(value)

value이 atom이나 selector일 경우 true를 반환하고 그렇지 않을 경우 false를 반환한다.

function isRecoilValue(value: mixed): boolean

Example

import {atom, isRecoilValue} from 'recoil';

const counter = atom({
  key: 'myCounter',
  default: 0,
});

const strCounter = selector({
  key: 'myCounterStr',
  get: ({get}) => String(get(counter)),
});

isRecoilValue(counter); // true
isRecoilValue(strCounter); // true

isRecoilValue(5); // false
isRecoilValue({}); // false

 

 

참고 : https://recoiljs.org/ko/docs/introduction/installation

'React' 카테고리의 다른 글

React Mac에서 파일 첨부시 파일명이 ㅎㅏㄴㄱㅡㄹ처럼 나온다면  (0) 2023.01.12
React 엑셀 다운로드  (0) 2022.05.20
React ag-Grid 사용하기  (0) 2022.05.20
React img srcSet과 a태그 스크롤  (0) 2022.05.20
React react-cookie  (0) 2022.03.25
'React' Related Articles more
Comments