Lv1_junior_dev
자라나라실력실력
Lv1_junior_dev
전체 방문자
오늘
어제

주인장 GitHub 바로가기

    • 분류 전체보기 (110)
      • 주절주절 (6)
      • 프로젝트 회고록 (3)
      • 꿀팁 (3)
      • 알고리즘 풀이 (26)
      • 자바스크립트 - Vanilla JS (25)
      • 자바스크립트 - React.js (37)
      • 자바스크립트 - Next.js (4)
      • 자바스크립트 - TypeScript (5)
      • HTML (0)
      • CSS (1)

    인기 글

    hELLO · Designed By 정상우.
    Lv1_junior_dev

    자라나라실력실력

    [React.js] Recoil의 atom, atomfamily와 selector, selectorFamily에 대해서 알아보자
    자바스크립트 - React.js

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

    2023. 9. 12. 21:11

    ❗ 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는 동적으로 생성되는 여러 계산을 관리할 때 유용하며 매개변수를 통해 독립적인 계산을 관리한다.

    '자바스크립트 - React.js' 카테고리의 다른 글

    [ReactQuery] useSuspenseQuery를 사용해서 Suspense 성능 개선 및 최적화를 해보자 !  (0) 2023.12.16
    [ReactQuery] useMutation과 useQuery에서 TypeScript 적용하기  (2) 2023.11.07
    [ReactQuery] useMutation에 대해서 알아보자 ! (feat. Optimistic Updates, invalidateQueries)  (0) 2023.07.28
    [ReactQuery] refetch에 대해서 알아보자 ! (feat. 전역 refetching, Polling)  (0) 2023.07.24
    [ReactQuery] useQuery의 select 옵션을 사용해보자 !  (0) 2023.07.18
      '자바스크립트 - React.js' 카테고리의 다른 글
      • [ReactQuery] useSuspenseQuery를 사용해서 Suspense 성능 개선 및 최적화를 해보자 !
      • [ReactQuery] useMutation과 useQuery에서 TypeScript 적용하기
      • [ReactQuery] useMutation에 대해서 알아보자 ! (feat. Optimistic Updates, invalidateQueries)
      • [ReactQuery] refetch에 대해서 알아보자 ! (feat. 전역 refetching, Polling)
      Lv1_junior_dev
      Lv1_junior_dev
      나는 성장이 고프다. 자라나라 개발 실력 !

      티스토리툴바