오늘은 전역 상태관리 라이브러리인 Recoil 에 대해서 알아보겠습니다.

Recoil 은 페이스북에서 만든 전역상태 라이브러리 입니다. React 만을 위한 전역 상태 관리 라이브러리라고 생각하시면 됩니다.

대표적인 전역상태 라이브러리인 redux 보다 장점은 짧은 코드와 리액트 문법과 유사하다는 것 입니다.

---

Recoil 설치

recoil 을 사용하기 위해서는 설치를 해줘야 합니다. 저는 npm 을 사용하고 있기 때문에 npm 을 이용해 설치를 진행 했습니다.

npm install recoil

위와 같은 명령어로 설치를 진행 합니다.

---

RecoilRoot

아래에서 설명할 atom , selector 를 컴포넌트에서 불러와 사용하고 싶다면 컴포넌트들의 가장 부모 컴포넌트를 RecoilRoot 로 감싸줘야 합니다. 예를 들어 App 컴포넌트의 하위 컴포넌트인 Home 컴포넌트에서 atom, selector 를 사용한다면 아래와 같이 코드를 작성하면 됩니다.

const App = ()=> {
  return (
    <RecoilRoot>
    <Home/>
    </RecoilRoot>
    );
};

---

Recoil 에서 기억해야 할 것은 Atom 과 Selector 입니다.

Atom

recoil 에서 사용하고 있는 state 의 단위를 atom 이라고 합니다. 우리는 이제 이 atom 을 어디에서든 구독해서 사용할 수 있습니다.
해당 atom 이 필요한 컴포넌트에서 불러와 구독(참조, 사용) 할 수 있고 state 를 업데이트(set) 할 수 있습니다. atom 을 업데이트 하면 구독하고 있는 모든 컴포넌트가 리 렌더링 되며 업데이트된 상태 값이 반영 됩니다.

atom 을 생성하는 코드를 알아봅시다. 예를 들어 유저의 데이터를 아톰으로 생성한다고 생각해봅시다.

const userDataAtom = atom({
  key : "userDataAtom",
 default : []
});

위와 같은 코드로 atom 을 생성합니다. 주의할점은 key 값은 중복되지 않아야 한다는 것 입니다.
default 값으로는 atom 의 초기 값을 넣고 싶은 값으로 지정해주면 됩니다.
useState(초기값) 를 선언할 때 인자로 넘겨주는 초기값과 같다고 생각하면 됩니다.

이제 생성한 atom 을 어떻게 구독해서 사용하는지 알아봅시다.

useRecoilState

const [userData, setUserData] = useRecoilState(userDataAtom);

리액트의 useState 훅에 대해서 알고 있다면 이해하기 쉬울 것 입니다.
useRecoilState 에 인자로 내가 구독하고 싶은 atom 을 넘겨주면 useState 와 유사하게 atom 값의 default 값과 set 함수를 리턴받게 됩니다. 리턴 받은 요소들을 이용하여 atom 의 state 를 참조할 수 있고 업데이트도 할 수 있게 됩니다.

useRecoilValue

const userData= useRecoilValue(userDataAtom);

atom 의 state를 변경하는 set 함수는 필요 없고 atom 의 state만 필요하다면 useRecoilValue 를 사용하면 됩니다.

useSetRecoilState

const setUserData = useRecoilValue(userDataAtom);

atom 의 state 를 사용하지 않고 atom 의 state 를 업데이트 해야하는 함수만 필요하다면 useSetRecoilState 를 사용하면 됩니다.
set 함수를 사용할 때 꼭 주의해야 하는 것이 있습니다. 바로 set 함수에 전달하는 인수는 새로운 객체를 복사해서 전달해야 한다는 것 입니다.

Selector

selector 는 파생된 상태를 만드는 api 입니다. 어떤 것의 파생된 상태를 만드냐면 atom 이나 다른 selecotr 의 상태를 가지고와서 파생된 상태를 만듭니다.
해당 selector 는 파생된 상태를 만들 때 가지고 온 atom 이나 selector 의 상태가 바뀌게 되면 재평가 됩니다.
어떻게 atom 이나 다른 selector 의 상태를 사용할 수 있는지 코드로 알아봅시다. 예를 들어 유저의 데이터 개수를 구하는 selector 를 만들어 봅시다.

const userDataNumber = selector({
  key : "useDataNumber",
  get : ({get})=> {
    const userData = get(userDataAtom);
    return userData.length;
  },
});

atom 과 같이 key 값은 중복되지 않아야 합니다. get 프로퍼티의 값은 atom 이나 selector 의 값을 가지고 와서 새오운 상태를 만들어 반환하는 함수 입니다.
get 메서드로 atom 의 상태를 가지고 올 수 있으며 이때 atom 의 상태는 변화하지 않는다.

컴포넌트에서 selector 의 상태 값을 사용하고 싶다면

const dataNumber = useRecoilValue(userDataNumber);

위와 같은 코드로 selector 의 get 프로퍼티의 리턴 값을 가져 올 수 있습니다. selector 에 get 프로퍼티만 작성 했다면 useRecoilValue 를 사용해 값을 가져와야 하고 수정은 불가능하다. 만약 다른 atom 이나 selector 의 값을 업데이트 하고 싶다면 set 프로퍼티를 작성하면 됩니다.
코드로는

const userDataNumber = selector({
  key : "useDataNumber",
  get : ({get})=> {
    const userData = get(userDataAtom);
    return userData.length;
  },
  set : ({set}, 전달받은 값)=> {
    set(useDataAtom, 전달받은 값);
  },
});

위와 같이 set 프로퍼티를 작성해주고

const setUserDataNumber = userSetRecoil(userDataAtom);
setUserDataNumber([새로운 유저들의 데이터 배열]);

위의 코드와 같이 set 함수를 사용 할 수 있다.

다음에는 selector 로 비동기 처리를 하는 방법에 대해서 알아보도록 하겠습니다.