Recoil - React용 실험적 상태 관리 라이브러리

여러 가지 이유로 호환성, 단순성 등과 같은 외부 전역 상태보다는 React의 내장 상태 관리 기능을 사용하는 것이 현명합니다. 불행하게도 다음과 같은 몇 가지 제한 사항이 있습니다.

컨텍스트는 단일 값만 저장할 수 있음

구성 요소의 상태는 공통 조상

으로 푸시해야만 공유할 수 있습니다.

이로 인해 상태가 사용되는 위치에서 상태가 유지되어야 하는 React 3개의 부분을 코드 분할하기가 어렵습니다. 며칠 전만 해도 페이스북은 위에서 언급한 한계를 극복할 수 있는 상태 관리 라이브러리를 오픈 소스로 공개했습니다.

움찔하다

Recoil은 API, 시맨틱 및 동작을 가능한 한 Reactish로 유지하면서 위에서 언급한 React 내장 상태 관리의 결함을 개선하는 것을 목표로 하는 React 앱용 실험적 상태 관리 라이브러리입니다. Recoil은 React의 최신 기능과 호환되는 동시에 React만으로는 달성하기 어려운 몇 가지 기능을 제공합니다.

Recoil defines a directed graph orthogonal to but also intrinsic and attached to your React tree. State changes flow from the roots of this graph (which we call atoms) through pure functions (which we call selectors) and into components.

원자 및 선택기

Recoil의 핵심 개념은 데이터가 Atoms(공유 상태)에서 Selectors(순수 함수)를 통해 앱을 빌드하는 React 구성 요소로 이동하는 데이터 흐름입니다.




출처: David McCabe @ recoiljs.org

원자는 구성 요소가 구독할 수 있는 상태의 단위입니다. 여기에는 애플리케이션 상태에 대한 정보 소스가 포함되어 있습니다. 선택기는 이 상태를 동기식 또는 비동기식으로 변환합니다. 원자는 atom() 함수를 사용하여 생성됩니다.

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

출처: recoiljs.org

선택기는 원자 또는 기타 선택기를 입력으로 받아들이는 순수 함수입니다. 이러한 입력이 변경되면 선택기 기능이 다시 평가됩니다. React 구성 요소는 선택자를 구독할 수 있으며 선택자가 변경되면 다시 렌더링됩니다.

선택기는 selector() 함수를 사용하여 정의됩니다.

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

출처: recoiljs.org

Recoil이 제공하는 접근 방식은 다음과 같습니다.

공유 상태가 React 로컬 상태와 동일한 간단한 가져오기/설정 인터페이스를 갖는 상용구 없는 API

동시 모드 및 기타 새로운 React 기능과의 호환성(사용 가능),

증분 및 분산 상태 정의 덕분에 코드 분할 가능성,

상태를 사용하는 구성 요소를 수정하지 않고 상태를 바꿀 수 있습니다.

파생 데이터는 이를 사용하는 구성 요소를 수정하지 않고도 동기식 데이터와 비동기식 데이터 간에 이동할 수 있습니다.

애플리케이션 상태의 이전 버전과의 호환성; 지속된 상태는 애플리케이션 변경 후에도 유지될 수 있습니다.

Recoil은 빠르고 유연한 공유 상태를 제공하는 React처럼 작동하고 생각합니다. 앱에 Recoil을 추가하고 상태 관리에 어떤 영향을 미치는지 확인하세요.

GraphQL API 개발 속도 향상

GraphQL Editor은 고급 GraphQL 사용자와 GraphQL API를 처음 사용하는 사용자를 위한 지원 도구입니다. GraphQL용 올인원 개발 환경은 수십 개의 내장 마이크로 기능 덕분에 GraphQL API를 훨씬 빠르게 구축, 관리 및 배포하는 데 도움이 됩니다.