[Recoil] 지원 중단

 

React 단짝

React 에 있어서 상태 관리 라이브러리 종류도 다양하게 있고, 항상 옆을 지켜왔습니다.
우리가 주로 사용하는 Redux, Mobx, Recoil 3대장 중에 Recoil은 2년전부터 업데이트가 잠정 중단됬다.

 

 

Recoil 문제점

Recoil 은 현재 수 많은 닫히지 않은 이슈와, 문제들이 나열되어 있지만, 해결 되고 있지 않다.
큰 이슈를 살펴봤을 때, 가장 핵심적인 문제는 다음과 같다.

 

메모리 누수 이슈

- 자바스크립트는 참 편하다. 가비지컬렉션을 타 개발자보다 신경 쓰지 않아도 되서.. 가비지 컬렉션은 아래 글을 참고!

[Garbage Collection]

참조되는 데이터는 지워지고, 값이 바뀌면 업데이트가 되야한다.

const userNameQuery = selectorFamily({
  key: 'UserName',
  get: (userID) => async () => {
    const response = await myDBQuery({userID});
    if (response.error) {
      throw response.error;
    }
    return response.name;
  },
});

function UserInfo({userID}) {
  const userName = useRecoilValue(userNameQuery(userID));
  return <div>{userName}</div>;
}

function MyApp() {
  return (
    <RecoilRoot>
      <ErrorBoundary>
        <React.Suspense fallback={<div>Loading...</div>}>
          <UserInfo userID={1} />
          <UserInfo userID={2} />
          <UserInfo userID={3} />
        </React.Suspense>
      </ErrorBoundary>
    </RecoilRoot>
  );
}

위 코드는 필자가 만든 것이 아닌, Recoil 공식 문서에 있는 튜토리얼 코드이다.
이 코드에서 메모리누수가 발생한다.

Recoil의 userName 을 업데이트 하는 과정에서, userName 값이 달라 업데이트 될 때에 userName 값이 새로 쓰이고, 사용하지 않더라도 지워지지 않는다.

우리가 Recoil 을 사용하면서 컴포넌트 별로 atom 을 구독시켜 사용하게 되는데, 해당 atom 들이 값을 사용하지 않더라도 가비지컬렉션이 일어나지 않고, 캐싱된 상태에서 메모리에 남아있게 된다.

이는 리액트에 큰 문제를 주는데, React Concurrent Mode 에서 문제가 발생할 수 있다.

위와 같은 메모리 누수는 리렌더링이 빈번한 환경에서 Memory limit exceed 가 발생 할 우려가 심각하다.

 

 

 

해결방법은 있을까?

# 메모리 누수는 개발자가 컨트롤 할 수 있는 부분은 존재한다.
Recoil 공식문서와 github를 살펴보았을 떄, atom 메모리를 초기화하려면, 명시적으로 resetRecoilState 해서 사용하는 방법은 존재 할 수 있을 것 같긴하다..

# 서비스의 규모에 따라 선택하자. 
규모가 작다면 Recoil 을 사용해도 무방하겠지만, 코어의 문제가 발생하면 Recoil 로 해결하려기 보다는 다른 라이브러리를 찾는것이 도움 될 수 있다.
atomic 한 상태를 다루는 라이브러리를 찾는다면, Jotai / zustand 가 있을 수 있다.

 

 

 

마치며..

본인은 Recoil 을 주로 사용하진 않았지만, 사용해 볼 기회도 없었어서 아쉽긴 하지만, 정식으로 다시 업데이트가 열린다면 사용해봐야 겠다.

또한, 사실 지금 전역상태 관리의 의문이 많은 상태이긴 하다. 확신이 든다면 조만간 포스팅하게 될 테지만..
전역상태 관리를 하면서 생기는 많은 문제점들이 그냥 편하다고 사용하면 안될 것 같은 느낌인다..

잠깐 주절주절하자면,
모든 데이터를 전역 관리하게 되면 컴포넌트간 연결고리가 없어 가독성이 떨어진다. (유지보수)
전역에서 상태관리 하므로 타입 관리 문제 (undefined 타입 선언이 필수적)
컴포넌트가 너무 큰 권한을 가지게 됨 ( 원인불명 버그 발생 요소 )

우선 생각나는건 이정도.. 다음에 더 자세하게 적어봐야겠다..