Recoil에 대해(핵심 요약)

반응형

React에서 사용하는 상태관리 라이브러리. React의 Concurrent Rendering(동시성 렌더링) 를 공식지원하는 유일한 라이브러리

 

recoil의 예시

핵심개념

• Atoms
  • Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.
  • Atoms는 런타임에서 생성될 수도 있다. Atoms는 React의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다.
    
    
• selectors
  • selectors는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다.
  • 상태를 기반으로 하는 파생 데이터를 계산하는데 사용된다. 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다.
  • 어떤 컴포넌트가 자신을 필요로 하는지, 또 스스로 어떤 상태에 의존하는지를 추적하기 때문에 이러한 함수적인 접근방식을 매우 효율적으로 만든다.
  • 비동기 함수가 될 수 있다. 하지만 React Query와 함께 사용해서 data fatching을 처리 할 수 있다.
    
    

장점

• 리액트스러운 접근과 단순함
  • 리덕스만큼 보일러 플레이트가 많지 않다.
• 쉬운 러닝커브
  • 이해하기 쉬운 Atom과 Selectors라는 개념이 있고 배울 것이 많지 않다.
• 앱 전체적인 상태 관찰
  • 어느 컴포넌트라도 전역상태에 직접 접근하여 상태를 업데이트 할 수 있다.