Recoil 사용하기

• Recoil은 상태 관리 라이브러리로 facebook에서 react 전용으로 만들어졌다.
• recoil은 기존의 상태 관리 라이브러리들보다 배우기 쉽고 훅을 사용하기에 편리하다.

npm install recoil
yarn add recoil

• 위와 같은 명령어로 recoil을 설치할 수 있다.
• RecoilRoot로 하위 컴포넌트를 감싸 사용할 수 있다.

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

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

export const state = atom({
  key: 'key', // 유니크한 키 값
  default: 'default', // 초기값
});

• atom은 상태의 일부를 나타내며, 어떤 컴포넌트에서도 사용할 수 있다.

• atom을 사용하여 전역 상태를 선언할 수 있다.

• atom에서 선언된 변수의 값이 바뀌게 되면, 그 상태를 사용하는 컴포넌트들이 리랜더링된다.

export const state = atom({
  key: 'state',
  default: {
  	name: "a",
    nickname: "b",
  },
});

export const stateSelector = selector({
  key: 'stateSelector',
  get: ({get}) => {
  		const data = get(state).nickname;
        return data;
    }
  },
});

• selector를 통해서 더 디테일한 처리를 할 수 있다.

• selector를 사용하여 캐싱을 할 수 있다.

• 비동기 처리를 하기 위해서 단순히 async 함수를 사용할 수 있다.

// store.js
export const stateSelector = selector({
  key: 'stateSelector',
  get: async ({get}) => {
    const res = await axios(API_호출);
    return res.name;
  },
});

// Component.js
function Component() {
  const data = useRecoilValue(stateSelector);
  return (
  		<div>
    		{data}
    	</div>
    );
}

• 필요에 따라서 상태와 상태 변경 함수를 모두 리턴하는 useRecoilState, 상태만 리턴하는 useRecoilValue, 상태 변경 함수를 리턴하는 useSetRecoilState을 사용할 수 있다.

  const [state, setState] = useRecoilState(key);
  const state = useRecoilValue(key);
  const setState = useSetRecoilState(key);

참고 자료 : https://recoiljs.org/ko/docs/introduction/getting-started, https://recoiljs.org/ko/docs/guides/asynchronous-data-queries/