상태 관리 라이브러리 - Recoil

Recoil이란?

✅ context API 기반으로 구현된 함수형 컴포넌트에서만 사용가능한 페이스북에서 만든 라이브러리

 

Recoil의 핵심 컨셉

✅ 오직 리액트만을 위해 리액트처럼
✅ react 내부 상태만 이용
✅ 작은 Atom 단위로 관리
✅ 순수 함수 Selector
✅ Re-Render 최소화
✅ 데이터 흐름을 따라서
✅ 곧 새로운 React 기능과 호환성

 

설치 방법

# npm
npm install recoil
# yarn
yarn add recil

 

주요개념

Atoms

✅ 상태(state)의 일부를 나타낸다.
✅ 업데이트와 구독이 가능하다.

✅ Atoms 는 어떤 컴포넌트에서나 읽고 쓸 수 있다.

✅ atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다
→ atom에 변화가 생기면, 그 atom을 구독하는 모든 컴포넌트가 리렌더링된다.

✅ atom 함수를 사용하여 생성한다.

✅ 컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 사용하면 된다.

 

Selectors

✅ 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다.
✅ 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectos에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다.

✅ Selector는 순수함수로서 Atom이나 또다른 selector를 이용해서 새로운 데이터를 전달해줄 수 있다.

✅ Selector를 이용하면 연관된 Atorm과 select가 변경되면 그에 따른 변경된 값을 즉시 받을 수 있고 이 Selector를 사용하는 컴포넌트도 리렌더링된다.

✅ Selector에서는 async 를 이용하여 비동기 작업이 가능하다. 또한 서버에서 api로 데이터를 불러오는것도 가능하다.

✅ Selector 또한 고유한 키값을 갖는다. ‘get’ 에는 반환 값을 만들어주면된다.

✅ getter는 필수로 갖고있지만 setter는 선택적으로 정의할 수 있다.

 

hooks

useRecoilState(state)

✅ state : atom 혹은 쓰기 가능한 selector

✅ useState를 사용하는 방식과 동일.
✅ 배열 첫번째 요소에 상태의 값이 들어가고 두번째 요소에 상태를 변경할 수있는 함수가 들어간다.
✅ 두번째 요소가 호출되었을 때 주어진 값을 업데이트하는 setter 함수인 튜플을 리턴한다.

✅ useState와의 차이점 : 변경된 상태가 자동으로 전역으로 상태가 공유된다는 점

✅ useRecoilState를 사용한 Atom의 상태는 이 상태를 사용하고 있는 다른 컴포넌트와 자동으로 공유된다.
→ 컴포넌트가 상태를 읽고 쓰려고 할 때 사용하는 것을 권장

 

useRecoilValue(state)

✅ state : atom 혹은 selector
✅ 주어진 Recoil 상태의 값을 리턴한다.

✅읽기 전용 상태와 쓰기 가능 상태에서 모두 동작함
→ 컴포넌트가 상태를 읽을 수만 있게 하고 싶을때 권장

 

 

---

Reference

 

https://www.youtube.com/watch?v=0-UaleJZOw8 

https://recoiljs.org/ko/docs/introduction/getting-started/

Recoil 시작하기 | Recoil