[번역] Recoil 0.6

[sbyeol3]

원문 : https://recoiljs.org/blog/2022/01/28/0.6.0-release/

Recoil 0.6이 동시성 렌더링과 전환뿐만 아니라 새로운 API와 수정사항, 최적화 등과 함께 React 18에 대해 더 향상된 지원기능을 제공합니다.

React 18

Recoil 0.6은 향상된 안전성과 성능을 위해 React 18의 최신 API를 사용합니다. 이번 릴리즈는 concurrent rendering과 <React.StrictMode> 모두 양립 가능하기 때문에 동시성 렌더링에 대해 잠재적인 이슈들을 테스트하고 식별하기에 유용합니다. 동일한 핸들러와 콜백에서 Recoil과 React 상태를 변경하여 일관되는 상태의 뷰를 제공합니다. 이러한 개선사항들 중 일부는 React 이전 버전을 사용하더라도 사용 가능합니다. React 18로 실험하신다면 최신 RC 빌드를 사용하세요. 오리지널 React 18.0.0-rc.0 패키지에는 그 이후 수정된 버그가 있습니다.

동시성 렌더링과 전환

React 18은 상태가 준비되기 전에 렌더링할 항목을 제어하는 동시에 새로운 상태로 전환하는 기능에 대한 새로운 hook, useTransition()을 제공합니다. Recoil은 이러한 접근방식과 호환가능하며 React 상태에 대한 일관적인 뷰를 제공합니다. 그러나, React 18은 동시적인 업데이트에서 물러날 수 있으며, 아직 공식적으로 외부 저장소에 대한 상태 변경값들을 기반으로 하는 전환은 지원하지 않습니다. 이는 리액트 팀에서 지원하고자 하는 기능이지만 다음의 hook을 통해 실험적인 지원을 추가했습니다. 이 API는 아직 처리되지 않은 유즈케이스들이 있으므로 실험적입니다.

• useRecoilState_TRANSITION_SUPPORT_UNSTABLE()
• useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()
• useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()

새로운 결과값이 로딩되는 동안 현재의 결과값을 보여주는 아래 예제가 있습니다.

function QueryResults() {
  const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
  const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams));
  return results;
}

function MyApp() {
  const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
  const [inTransition, startTransition] = useTransition();
  return (
    <div>
      {inTransition ? <div>[Loading new results...]</div> : ''}
      Results: <React.Suspense><QueryResults /></React.Suspense>
      <button
        onClick={() => {
          startTransition(() => {
            setQueryParams(...new params...);
          });
        }
      >
        Start New Query
      </button>
    </div>
  );
}

새로운 기능

• Recoil 콜백
  • useRecoilCallback()은 셀렉터 캐시를 새로고침할 수 있으며 useRecoilRefresher_UNSTABLE()와 비슷합니다.
  • getCallback()을 사용하는 셀렉터의 콜백은 useRecoilCallback()와 비슷하게 상태를 변경하고, 새로고침하고 트랜잭션을 수행하며 이를 읽는 것도 가능합니다.
• 저장소 ID - StoreID는 useRecoilStoreID()나 atom effects의 storeID 파라미터를 사용하여 얻을 수 있습니다.
• RecoilLoadable.of() and RecoilLoadable.all() 팩토리함수들은 리터럴 값이나 async Promises 또는 Loadable을 받을 수 있습니다�. 이는 Promise.resolve()와 Promise.all()에 필적합니다.
• 스냅샷에 .isRetained() 메소드를 추가하여 .retain()을 통해 스냅샷이 릴리즈되었는지 확인할 수 있습니다.