리액트 리코일

리액트 리코일

Recoil?

• Recoil은 페이스북이 React 전용으로 낸 상태 관리 라이브러리
• Recoil을 통해 전역 상태 관리하면 코드가 간결해진다
• Recoil의 리렌더링
  • 각각의 전역 상태에 대한 atom이 생성되고 해당 상태를 구독하는 구성 요소만 리렌더링 된다.

Recoil 장점

• Recoil은 전역 상태 관리를 컴포넌트 내부의 상태 관리처럼 간단한 get/set 인터페이스로 사용할 수 있도록 boilerplate-free API를 제공한다.
• Concurrent Mode를 비롯한 다양한 React 기능들과 호환이 가능하다.
• 상태 정의에 대한 코드 분할이 가능하다.
• 전역 상태를 사용하고 있는 컴포넌트는 수정 없이 변경된 상태로 교체할 수 있다.
• 컴포넌트 수정 없이 동기식/비동기식 전환이 가능하다.
• 전역 상태의 경우 애플리케이션이 변경되더라도 그대로 유지된다.

Atoms

• Atoms는 상태 단위이며, 업데이트와 참조가 가능하다.
• atom이 업데이트되면 각각의 컴포넌트들은 새로운 값을 반영하여 리렌더링 된다.
• atoms는 컴포넌트 내부의 상태 대신 사용될 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 그 컴포넌트들은 상태를 공유한다.
• Atoms는 atom 함수를 사용해 생성한다.
• atom의 키 값은 전역적으로 고유해야 한다.

selectors

• selector는 전역 상태를 기반으로 어떤 계산을 통해 새로운 값을 내뱉는 순수 함수이다.
• atom이나 다른 selector를 통해 입력을 받을 수 있다. 상위의 atom이나 다른 selector가 업데이트되면 하위의 selector 함수도 다시 실행된다.
• 컴포넌트들은 위에서 atom을 통해 전역 값을 사용했던 것처럼 selector를 사용할 수 있다.
• 기본적이고 최소한의 상태들은 atom에 저장해두고, selector에 명시한 함수를 통해 상태 값을 변경하면 된다. 따라서 이전 상태 관리 라이브러리들이 기존 상태 값을 보존하기 위해 했던 짓을 안 해도 된다.
• 컴포넌트의 관점으로 봤을 때 atom과 selector는 동일한 인터페이스를 가지므로 대체하여 사용할 수 있는 것이다.
• get은 상태를 계산할 함수가 담겨져 있다. get으로 전달되는 매개변수를 통해 atom이나 다른 selector에 접근할 수 있다. (종속 관계 생성)