[React.js] Recoil의 atom, atomfamily와 selector, selectorFamily에 대해서 알아보자

❗ atom

atom은 단일 값 또는 객체를 나타내는 불변 상태를 정의하고 애플리케이션 전체에서 공유된다.
모든 컴포넌트에서 동일한 atom을 사용하며, 해당 atom에 대한 변경 사항은 모든 구독 컴포넌트에 자동으로 전파된다.

✔ 예제

import { atom, useRecoilState } from 'recoil';

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

function CounterComponent() {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

해당 예제는 Recoil의 atom을 사용하여 상태를 정의하고 CounterComponent에서 해당 상태를 조회하고 변경하는 간단한 컴포넌트를 출력하는 예제이다.

 

❗ atomFamily

atomFamily는 동적으로 생성되는 상태를 정의할 때 사용된다.

각각의 atomFamily 인스턴스는 고유한 키를 가지며, 해당 키를 기반으로 독립적인 상태를 관리한다.
이는 동일한 컴포넌트를 여러 번 렌더링하고 각각의 인스턴스에 다른 상태를 제공하는 데 유용하다.

✔ 예제

import { atomFamily, useRecoilState } from 'recoil';

const dynamicCounterState = atomFamily({
  key: 'dynamicCounterState',
  default: (id) => id * 2,
});

function DynamicCounterComponent({ id }) {
  const [count, setCount] = useRecoilState(dynamicCounterState(id));

  return (
    <div>
      <p>Count {id}: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

이 예제에서는 dynamicCounterState를 사용하여 각 DynamicCounterComponent의 독립적인 카운터 상태를 생성하여

id 매개변수에 따라 각 인스턴스가 고유한 상태를 관리하게 된다.

---

❗ selector

selector는 Recoil 상태 트리에서 값을 계산하거나 파생할 때 사용된다.

selector를 정의할 때, 의존성 배열을 명시하여 필요한 Recoil 상태를 지정할 수 있다. 이러한 의존성이 변경될 때만 selector 함수가 다시 실행되고 selector를 사용하면 계산된 값을 가져올 때마다 실시간으로 업데이트되는 반응형 상태 값을 얻을 수 있다.

 

✔ 예제

import { selector, useRecoilValue } from 'recoil';

const totalSelector = selector({
  key: 'totalSelector',
  get: ({ get }) => {
    const count1 = get(counterState1);
    const count2 = get(counterState2);
    return count1 + count2;
  },
});

function TotalComponent() {
  const total = useRecoilValue(totalSelector);

  return (
    <div>
      <p>Total: {total}</p>
    </div>
  );
}

해당 예제는 Recoil의 selector를 사용하여 counterState1과 counterState2라는 두 개의 Recoil 상태를 조회하고 그 값을 더한 후 TotalComponent에서 화면에 표시하는 예제이다.

 

❗ selectorFamily

selectorFamily는 동적으로 생성되는 여러 상태 값을 관리할 때 사용된다. 각 selectorFamily 인스턴스는 고유한 키를 가지며, 인스턴스마다 다른 매개변수를 기반으로 값을 계산할 수 있다.
selectorFamily를 사용하면 동일한 selector를 여러 번 인스턴스화하여 각각 다른 계산을 수행할 수 있다는 장점이 있다.

 

✔ 예제

import { selectorFamily, useRecoilValue } from 'recoil';

const dynamicTotalSelector = selectorFamily({
  key: 'dynamicTotalSelector',
  get: (id) => ({ get }) => {
    const count = get(counterState);
    return count * id;
  },
});

function DynamicTotalComponent({ id }) {
  const total = useRecoilValue(dynamicTotalSelector(id));

  return (
    <div>
      <p>Total for ID {id}: {total}</p>
    </div>
  );
}

이 예제에서는 dynamicTotalSelector를 사용하여 각 DynamicTotalComponent의 독립적인 계산된 값을 생성하여

id 매개변수에 따라 각 인스턴스가 다른 계산을 수행하게 됩니다.

 

정리하자면,

• atom은 공유 상태를 정의하고, atomFamily는 동적으로 생성되는 독립적인 상태를 정의한다.
• atomFamily는 동일한 컴포넌트를 여러 번 렌더링하고 각각에 다른 상태를 제공하는 상황에서 유용하다.
• selector는 Recoil 상태 트리에서 값을 계산하고 업데이트할 때 사용되며 의존성 배열을 통해 업데이트를 제어한다.
• selectorFamily는 동적으로 생성되는 여러 계산을 관리할 때 유용하며 매개변수를 통해 독립적인 계산을 관리한다.