[React] Recoil(2)

Recoil - Selector

Recoil에서 Selector는 파생된 상태 또는 계산된 상태를 나타낸다. 즉 기본적인 atom상태나 다른 selector의 상태를 기반으로 계산되거나 변환된 값을 나타내는데 사용된다.

역할

1. 파생된 상태 계산

• selector는 하나이상의 atom 또는 다른 selector의 상태를 기반으로 값을 계산할 수 있다. 예를 들어서 할 일 목록에서 완료된 항목만 필터링하거나, 항목의 총 개수를 계산하는 등의 작업을 수행할 수 있다.

import { atom, selector } from 'recoil';

// Atom: 기본 상태
const numberListState = atom({
  key: 'numberListState',
  default: [10, 20, 30, 40],
});

// Selector: 리스트의 합계 계산
const sumState = selector({
  key: 'sumState',
  get: ({ get }) => {
    const numbers = get(numberListState);
    return numbers.reduce((acc, num) => acc + num, 0);
  },
});

2. 캐싱

• selector는 계산된 값을 캐시한다. 이것은 동일한 입력에 대해서 여러번 계싼을 수행하지 않도록 최적화하는데에 도움이 된다.
• 캐싱의 예제는 1번 코드 참고
• Recoil은 자동으로 selector의 계산 결과를 캐시한다. 따라서 동일한 입력에 대해 selector가 여러 번 호출되더라도 계산은 한 번만 수행된다. 이는 성능 최적화에 도움이 된다. 위의 sumState 예제에서, numberListState의 값이 변경되지 않는 한, sumState의 계산은 한 번만 수행된다.

3. 종속성 관리

• selector는 자동으로 종속성을 관리한다. 즉 어떤 atom 또는 selector의 상태가 변경되면 해당 상태를 의존하는 selector의 값도 다시 계산된다.

const multipliedByTwoState = selector({
  key: 'multipliedByTwoState',
  get: ({ get }) => {
    const numbers = get(numberListState);  // numberListState에 의존
    return numbers.map(num => num * 2);
  },
});

4. 비동기 작업

• selector는 비동기 작업을 포함할 수 있다. get속성 내에서 비동기 작업을 수행하고 결과를 반환할 수 있다.

import { atom, selector } from 'recoil';

const asyncDataState = atom({
  key: 'asyncDataState',
  default: [],
});

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

const asyncDataSelector = selector({
  key: 'asyncDataSelector',
  get: async () => {
    const data = await fetchData();
    return data;
  },
});
//multipliedByTwoState는 numberListState에 의존합니다. 따라서 numberListState의 값이 변경되면 multipliedByTwoState의 값도 자동으로 다시 계산됩니다.