React-Native Recoil Examples

React-Native에서 Recoil 상태관리 라이브러리를 사용한 여러가지 예시를 정리함.

Recoil

페이스북에서 만든 React만을 위한 React전용 상태관리 라이브러리

• Recoil 공식깃헙
• Recoil 한글문서

실행

$ git clone https://github.com/nightohl/recoil_template.git
$ cd RecoilTemplate
$ yarn install
$ npx pod-install
$ npx react-native run-ios

예시

1. BasicCounter

atom 으로 상태를 정의하고, RecoilRoot, useRecoilState를 통해 컴포넌트간 상태를 공유하는 기본적인 예시

• 동일한 atom을 참조하면 자동으로 상태가 공유되고 종속성이 생긴다.
• 컴포넌트는 가장 가까운 RecoilRoot를 참조하므로, RecoilRoot가 다를 때에는 동일한 atom을 참조했더라도 서로 공유되지 않는다.

---

2. ColorBoxes

atom에서 파생된 데이터를 만드는 selector에 대한 기본적인 예시

• selector의 get 함수를 정의함으로써, atom 상태값을 이용하여 필요한 연산을 거쳐 가공된,파생된 결과 값을 반환받을 수 있다.
• selector의 set 함수를 정의함으로써, atom 상태값을 이용하여 필요한 연산을 거친 후 가공된,파생된 결과 값을 atom에 반영시킬 수 있다.
• get과 set을 모두 정의한 경우 useRecoilState를 이용하여 아래와 같이 Hook으로 반환받아 사용할 수 있다.
• selector는 자신이 어떤 atom들을 의존하고 있는지, 또 어떤 컴포넌트들이 자신을 필요로하는지를 추적하기 때문에 상태가 변화하면 연관된 컴포넌트들도 다시 렌더링 된다.

// 셀렉터 정의

export const 셀렉터 = selector({
  key: 'colorCounterState',
  get: ({get}) => {
      const 현재_아톰_상태값 = get(아톰);
      /*
       ... 가공 ... 가공
       (atom에는 영향을 끼치지 않음)
      */
    }
    return 가공된_결과값;
  },

  set: ({set}) => {
      set(아톰, 새로운_값);
  },
});

// 가공된 상태값이 필요한 컴포넌트

const [value, setValue] = useRecoilState(셀렉터); // 그냥 hook 쓰듯이 쓰면 된다.

---

3. SearchAnimation

React 동시성 모드의 일부기능인 Suspense를 활용한 비동기 처리 예시

<Suspense fallback={<Text>비동기 처리가 완료되기까지 보여질 컴포넌트</Text>}>
  <비동기_요청을_보내는_컴포넌트 />
</Suspense>

• selector에서 비동기 요청이 필요한 함수 정의 시 그냥 async & await으로 작성하면 된다:

export const 비동기_셀렉터 = selector({
  key: '유니크한_키',
  get: async ({get}) => {
    const param = get(아톰);

    const response = await fetch(
      `https://your.api.com/?param=${param}`,
    );
    const data = await response.json();

    return data.results;
  },
});