[React] Ep2. Recoil API

 

안녕하세요. 모리스입니다.😊

지난 포스트에서는 React의 Recoil에 대해 아주 간단하게 찍먹해 보았는데요.

이번 포스트는 Recoil에서 자주 사용되는 API 몇 가지에 대해 작성해 보려 합니다.!

 

📒 RecoilRoot

Recoil 상태를 사용하려면, 반드시 컴포넌트 트리 최상위에 RecoilRoot를 선언해야 해요. 그래야 전역에서 상태를 감지하고 관리할 수 있겠죠?

React Native에서는 보통 루트 컴포넌트인 App.js에 Recoil Root를 선언해요.

import React from 'react';
import { RecoilRoot } from 'recoil';

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

 

---

📒 atom()

atom은 Recoil에서 상태를 나타내는 가장 기본 단위예요. atom() 함수는 쓰기 가능한 RecoilState 객체를 반환해요.

const myAtom = atom({
  key: 'myAtom',      // 전역 고유 키
  default: 0,         // 초기값
});

주요 옵션

• key: atom을 고유하게 식별하는 문자열로, 앱 전체에서 중복되면 안 돼요.
• default: 초기값. Promise, 다른 atom 또는 selector도 가능해요.
• effects_UNSTABLE: atom의 생명 주기 이벤트에 반응하는 커스텀 effect들을 정의할 수 있어요.
• dangerouslyAllowMutability: 객체의 내부 상태를 변경 가능하게 만들 수 있어요. 특별한 경우에만 사용하는 게 좋아요.

💡 자주 사용하는 Recoil Hook들

• useRecoilState() – 읽고 쓰기 모두 가능
• useRecoilValue() – 읽기 전용
• useSetRecoilState() – 쓰기 전용
• useResetRecoilState() – 초기값으로 리셋
• useRecoilCallback() – 컴포넌트 외부에서 값 읽기

Hook에 대한 자세한 설명은 다음 포스트에서 다뤄볼게요.

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { atom, useRecoilState } from 'recoil';

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

function Counter() {
  const [count, setCount] = useRecoilState(counter);
  const incrementByOne = () => setCount(prev => prev + 1);

  return (
    <View>
      <Text>Count: {count}</Text>
      <TouchableOpacity onPress={incrementByOne}>
        <Text>Increment</Text>
      </TouchableOpacity>
    </View>
  );
}

 

---

📒 selector()

저번 포스트에서도 나왔던 selector입니다~!! 한 번 더 보고 넘어가 볼게요.

selector는 atom의 상태를 기반으로 파생 상태를 계산하는 순수 함수예요. get만 있으면 읽기 전용이고, set도 포함하면 쓰기 가능한 상태로 만들 수 있어요.

const mySelector = selector({
  key: 'mySelector',
  get: ({ get }) => {
    const value = get(myAtom);
    return value * 2;
  },
});

주요 옵션

• key: selector를 고유하게 식별하는 문자열
• get: 파생 상태를 계산하는 함수. get()을 사용해 다른 atom이나 selector 값을 가져올 수 있어요.
• set (선택): selector를 통해 상태를 변경할 수 있어요.
• dangerouslyAllowMutability: 객체 변경을 허용하는 옵션 (권장 X)

동적 의존성

get() 함수 안에서 조건에 따라 사용하는 의존성을 바꿀 수 있어요. 아래 예시처럼 조건문 안에서 get()을 호출하면, 해당 selector는 실제로 사용된 의존성만 구독하게 돼요.

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

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

쓰기 가능한 Selector 예시

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

입력 값을 변환해야 한다면 DefaultValue 인스턴스를 체크해야 해요.

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

비동기 Selector

비동기 요청도 가능해요. get() 함수가 Promise를 반환하면, 해당 selector는 비동기 상태를 가지게 돼요.

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

 

---

📒 인용 출처

 

selector(options) | Recoil

 

atom(options) | Recoil

 

잘 못되었거나 수정할 부분이 있다면 언제든 댓글로 혼내주시길 바랍니다.!!

오늘도 긴 글 읽어주셔서 감사합니다.😊