새로운 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 이 조합까지!!

2 thoughts to “Recoil 라이브러리 사용기

  • 리앵트 개발자

    저도 비슷한 이슈를 겪었고 현재 recoil 이슈에 남겨서 enhancement 라벨이 붙은 상태입니다.
    일단 로그인의 경우는 공홈의 refresh 예시에도 나와있다시피 counter 상태 atom에 의존시켜서 refresh하면 되긴 할텐데 깔끔하진 않죠

    https://github.com/facebookexperimental/Recoil/issues/1182

    https://github.com/facebookexperimental/Recoil/issues/1186

    응답
  • 리앵트 개발자

    저도 비슷한 이슈를 겪었고 현재 recoil 이슈에 남겨서 enhancement 라벨이 붙은 상태입니다.
    일단 로그인의 경우 selector에서 http 통신하지말고 컴포넌트에서 한 다음 응답 데이터를 atom에 set하는 방식으로 할 순 있을겁니다.

    https://github.com/facebookexperimental/Recoil/issues/1182
    예전 이슈는 밑에 링크달아놨고 커스텀 캐싱 설정에 대한 추가 요청을 했습니다.

    https://github.com/facebookexperimental/Recoil/issues/1186
    다른 분도 제 이슈에 공감하시고 비슷한 이슈 남겨주셨더군요

    아마 0.5나 0.6 버전에서 추가되지 않을지..
    관심 있으시면 제 이슈에 독촉요구를.. 부탁드립니다.. ㅎㅎ

    응답

Leave a comment

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다