Recoil 라이브러리 사용기

새로운 React 프로젝트를 시작하면서 상태관리 라이브러리를 고르는데,

팀원중에 React를 아예 처음 접하시는 분이 계시고, 프로젝트 기간은 짧아서 그나마 러닝커브가 낮은 Recoil을 사용해보기로 했다.

(그렇지만 결국 다시 Redux로 돌아가게 되었다. 이건 뒤에…)

일단 Redux 대신 Recoil을 선택했던 이유는

1. 페이스북에서 React 비동기 처리를 위래 만들었던 라이브러리로 훨씬 리액트스러움 (hooks)
2. 보일러플레이트가 많지 않음(Redux는 한 처리를 위래 type > action > saga > reducer를 거쳐야한다)
3. 미들웨어 라이브러리가 필요하지 않음

처음엔 atom, selector를 이해하기가 쉽진 않았지만 공식문서와 이것저것 구글링을 통해

나름대로의 개념을 세울 수 있게 되었다.

(공식문서 : https://recoiljs.org/ko/ )

• atom : redux의 state와 같은 개념으로 react app에서 관리할 상태
• selector : 비동기 처리를 하는 함수이며 다른 atom이나 selector의 값을 set할 수 있으며 custom한 값을 담고 있는 상태
• selectorFamily : 파라미터가 필요한 비동기 처리 함수

특히, selector는 의존성을 갖고 있는 atom이 값이 변할 경우 refresh 하게 된다.

selectorFamily도 마찬가지인데 selectorFamily는 받게 되는 파라미터에도 의존성을 갖게 된다.

• api : (1) useRecoilValue : value 반환 (2) useSetRecoilState : setter 반환 (3) useRecoilState : [ value, setter ] 반환하고 인자는 atom과 selector를 받는다.

예시는 간단하게

export const loginSelector = selectorFamily({
  key: 'loginSelector',
  get: (data) => async () => {
    if (isEmptyObject(data)) {
      return;
    }
    const res = await onLogin(data);
    return res;
  },
});

처음에는 selectorFamily에 data를 넘겨서 로그인을 했다.

작동도 잘하고, 코드도 매우 짧아져서 좋았다.

그러나 문제는 해당 로직이 로그인이라는 점이었다.

로그인을 구현하고 로그아웃을 한 후에 다시 로그인을 하는 테스트를 해보았는데,

이전과 같은 아이디로 로그인을 할 경우, data에 대한 캐싱값을 가지고 있어서

api를 호출하기 않고 바로 로그인 성공 로직을 수행하는 것이었다.

…

그래서 의존성이 문제인가 하고, selectorFamily에서 selector로 바꾸고 atom의 값을 변경에 refresh하도록 하였다.

결과는 마찬가지였다.

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

내가 문제인건가… selector의 캐싱을 초기화하는 방법은 없을까하고 구글링을 계속했지만

아직 UNSTABLE한 효과만 뜨고, 결국 방법을 찾지 못했다.

분명 UNSTABLE도 사용할 수 있을 것이고, 어딘가에 방법이 있을텐데(있으면 제발 알려주세요)ㅠㅠ

프로젝트가 조금만 여유로웠다면 은 리덕스와 리코일을 같이 사용할 수도 있었을텐데 아쉬웠다.

다음 프로젝트때는 꼭 recoil을 적용해보려고 한다.

욕심이지만 팀원분이 react에 익숙해지시면 useSWR + recoil 이 조합까지!!