Recoil의 구성요소

Donggu(oo)·2023년 5월 15일
Recoil
0

Recoil

목록 보기
1/1
post-thumbnail

1. 설치

npm install recoil

2. Recoil의 구성요소

1) RecoilRoot

  • 최상위 루트 컴포넌트(index || App)를 RecoilRoot로 감싸준다.
import {RecoilRoot} from 'recoil';

function AppRoot() {
  return (
    <RecoilRoot>
      <ComponentThatUsesRecoil />
    </RecoilRoot>
  );
}

2) Atom

  • Atom은 상태(state)의 일부를 나타낸다. Atom은 어떤 컴포넌트에서나 읽고 쓸 수 있으며, atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다.

  • atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 리렌더링 된다.

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

2-1. Atom의 구성 요소

  • key - 내부적으로 atom을 식별하는데 사용되는 고유한 문자열이다. 이 문자열은 어플리케이션 전체에서 다른 atom과 selector에 대해 고유해야 한다.

  • default - atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector 이다.

  • effects_UNSTABLE - atom을 위한 선택적인 Atom Effects 배열이다.

  • dangerouslyAllowMutability - Recoil은 atom을 이용해 다시 렌더링 되는 컴포넌트에 언제 알려야 할지 알기 위해 atom의 상태 변화에 의존한다. 만약 atom의 값이 변경될 경우, 이를 거치지 않고 등록된 컴포넌트에 제대로 알리지 않고 상태가 변경될 수 있다. 이를 방지하기 위해 저장된 모든 값이 변경되지 않는다. 경우에 따라 이 옵션을 사용하여 이 옵션을 재정의할 수 있다.

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

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

  dangerouslyAllowMutability?: boolean,
}): RecoilState<T>

2-2. atom의 Hooks

1. useRecoilState()

  • useRecoilState() Hook은 atom을 읽기와 쓰기를 할 때 사용하는 Hook이다. 이 Hook은 atom에 컴포넌트를 등록하도록 한다.

  • atom에 useRecoilState() Hook을 사용하는 컴포넌트를 등록한다.

2. useRecoilValue()

  • useRecoilValue() Hook은 atom을 읽기만 할 때 사용하는 Hook이다. 이 Hook은 atom에 컴포넌트를 등록하도록 한다.

  • atom에 useRecoilValue() Hook을 사용하는 컴포넌트를 구독한다.

3. useSetRecoilState()

  • useSetRecoilState() Hook은 atom에 쓰기만 할 때 사용하는 Hook이다.

  • useSetRecoilState() Hook은 상태를 변경하기 위해 비동기로 사용될 수 있는 setter 함수를 리턴하며, setter는 새로운 값이나 이전 값을 인수로 받는 updater 함수를 넘겨준다.

  • useSetRecoilState() Hook을 사용하는 컴포넌트는 atom을 구독하지 않기 때문에 atom의 값이 변경되더라도 리렌더링 되지 않기 때문에 무조건 useRecoilState() Hook 만 사용하는 것은 지양하고 atom의 value 값이 필요없는 컴포넌트라면 useSetRecoilState() Hook을 사용하는 것이 좋다.

4. useResetRecoilState()

  • useResetRecoilState() Hook은 atom을 초깃값으로 초기화 할 때 사용하는 Hook이다.

  • useSetRecoilState() Hook과 같이 비동기 setter 함수를 리턴하며 useSetRecoilState() Hook을 사용하는 컴포넌트를 구독하지 않는다.

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>
  );
}

3) Selector

  • Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태는 상태의 변화이며, 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.

  • Selector는 Recoil에서 함수나 파생된 상태를 나타낸다. 주어진 종속성 값 집합에 대해 항상 동일한 값을 반환하는 부작용이 없는 "순수함수"다.

  • get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환하며, set 함수 또한 제공되면 Selector는 쓰기 가능한 RecoilState 객체를 반환한다.

3-1. Selector의 구성 요소

  • 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에 저장된 모든 값은 기본적으로 고정되어 있다. 경우에 따라 이 옵션을 사용하여 재정의해야 할 수 있다.

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;

3. 예제

1) RecoilRoot

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

2) Atom

  • 컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 사용한다.
function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}
function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

3) Selector

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});
  • useRecoilValue() 훅을 사용해서 charCountState 값을 읽을 수 있다.
function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

참고

profile
Donggu(oo)

0개의 댓글