[React-Native] Recoil 사용하기

상태 관리 라이브러리 Recoil을 React-Native 에서 사용해 보겠습니다.

 

Atom

관리의 대상이 되는 상태 단위입니다. 한 가지의 변수 뿐만 아니라 배열, Object 등 다양한 종류의 자료 구조 또한 Atom이 될 수 있습니다.

key는 해당 Atom에 할당되는 고유한 id 입니다. 단순히 상태 업데이트 시 사용되는 것 뿐 아니라 캐싱을 통한 성능 개선을 위해 사용합니다.

// 수
const numberTmpState = atom({
	key: 'numberTmpState',
    default: 0,
});


// 배열
const ArrayTmpState = atom({
  key: 'ArrayTmpState',
  default: [],
});

 

Selector

생성한 Atom을 활용하기 위해 Selector를 사용할 수 있습니다. Atom 정의 시 내부에 같이 정의할 수 있습니다.

const ArrayTmpState = selector({
  key: 'ArrayTmpState',
  get: ({get}) => {
    return ArrayTmpState;
  },
});

 

커스텀 함수 사용하여 활용

먼저 Atom의 상태를 공유할 최상의 컴포넌트를 RecoilRoot로 감쌉니다. 일반적으로 App.tsx에 작성합니다.

import {RecoilRoot} from 'recoil';

<RecoilRoot>
...
</RecoilRoot>

 

다음으로 Atom을 활용할 수 있는 함수를 작성합니다. 배열의 경우 아래와 같은 방식으로 활용할 수 있습니다.

 const [arrayTmpState, setArrayTmpState] = useRecoilState(arrayTmpState);

 const addArrayTmpState = () => {
    ...
  };

  const removeArrayTmpState = () => {
	...
  };