[React] 상태관리 라이브러리 RecoilJS

 

🔷 상태관리 라이브러리 Recoil

       A state management library for React 

 

투두메이트 클론 프로젝트를 진행하면서 상태관리 라이브러리에 대해서도 공부하게 되었다.

리액트 개발자라면 누구나 필수로 사용해야 한다는 상태관리 라이브러리들 중에서

가장 유명한건 역시 Redux지만

Redux가 큰 규모의 애플리케이션에 적용하기 좋은 라이브러리이고

그렇기 때문에 무겁다는 평이 있어서 작은 프로젝트인 우리 프로젝트에서는 Recoil을 쓰는 것을 추천해주셨다.

리액트를 만든 페이스북팀이 만든 상태관리 라이브러리기 때문에 앞으로의 대세가 될 가능성이 있다.

 

아직 리코일에 대한 글이 많이 없어서 유튜브와 블로그를 참고해서 상태관리에 대한 정의와 Recoil 사용법을 간단하게 정리해보고자 한다.

상태관리도 처음인데 자료가 공식 문서 밖에 없어서 떨리는 마음.. (영어를 조금만 더 잘했어도 😢)

 

Recoil

 

---

🔸 상태관리State-management란?

 

▪ 상태

애플리케이션의 동작 방식을 설명하는 모든 데이터를 상태State 라고 한다. 

시간이 지남에 따라 상태가 변경되는 방식을 관리하는 것을 상태관리State-management라고 한다.

 

▪ 상태관리 기능

 

- 최초 값 Initial Value를 저장

- 현재 값 Current Value를 읽기

- Value 값을 업데이트

https://blog.codecentric.de/en/2017/12/developing-modern-offline-apps-reactjs-redux-electron-part-3-reactjs-redux-basics/

🔸 Recoil

Recoil은 리액트의 내장 상태 관리 기능(useState, useContext, Context API)의 한계점을 극복하고

최대한 React스러운 API를 유지한다.

그리고 사용하기 위한 부속 라이브러리(ex : Redux의 Saga, Toolkit 등)를 최소화 하는 장점이 있다.

(Redux처럼 React-redux처럼 다리가 되는 라이브러리 필요없이 Recoil과 리액트가 연결된다.)

https://coleredfearn.medium.com/atomos-a-new-recoil-visualization-tool-powered-by-react-flow-6e0404a16b9a

 

 

🔸 Recoil의 철학

 

- 보일러 플레이트가 적은 API

- 리액트의 로컬 상태 관리 시스템(useState, useReducer)과 유사한 인터페이스

- selector를 이용해 파생데이터를 사용함으로 기존 라이브러리들이 사용한 컴포넌트에서 임의로 데이터를 바꾸는 로직을 사용하지 않아도 된다.

- 코드 상호간의 결합도가 낮다.

- 유연하게 상태 관리가 가능하다.

 

🔸 Recoil의 기능

▪ Atom 아톰

- 아톰은 상태 (≒ state, props) 이고, 데이터를 보관하는 기본 단위를 말한다.

- 아톰은 Redux의 store의 상태처럼 구독 가능하다.

- 아톰이 변경되면 아톰과 연결되어 있는 컴포넌트들이 재렌더링 되면서 변경된 아톰을 공유한다.

- 아톰은 고유한 key와 default를 가진다.

- 고유한 키를 가지고 컴포넌트에서 아톰을 사용할 수 있다.

- 설정한 default는 상태의 초깃값 initial value가 된다.

 

⇨ 아톰은 state, props 같은 상태다.

⇨ 아톰의 초깃값은 default다.

⇨ 아톰은 key로 불러 사용할 수 있다.

 

▪ selector

- 셀렉터는 아톰과 셀렉터들을 조합할 수 있다.

- 셀렉터를 이용해 새로운 데이터를 전달해 줄 수 있다. (파생되는 상태Derived state를 생성한다.)

- 셀렉터는 고유한 key를 갖는다.

- 셀렉터가 참조한 아톰이나 셀렉터가 변경되면 변경된 값을 즉시 받을 수 있고, 이것들을 사용하는 컴포넌트도 재렌더링 된다. 

- 셀렉터로 async를 이용한 비동기 작업이 가능하다. (서버에서 api로 데이터를 불러올 수 있다)

- 셀렉터로 부른 return 값은 useRecoilValue(셀렉터key)를 통해 받아올 수 있다.

- 셀렉터의 return 값은 읽기 전용이다.

 

▪ useRecoilState

- useRecoilState는 useState 훅과 사용하는 방식이 동일하다 👍

- let [상태, 상태변경함수] = useState(초깃값);

- let [상태, 상태변경함수] = useRecoilState(key);

- useRecoilState을 사용한 아톰의 상태는 자동으로 상태가 공유되고 전역으로 공유된다.

 

▪ useRecoilValue

- useRecoilValue는 상태를 변경하는 함수 없이 아톰의 값만 받는다.

 

▪ useRecoilCallback

- 리액트의 useCallback과 유사하고, 리코일 State를 사용할 수 있는 API를 제공한다.

- 아톰이나 셀렉터가 업데이트 되면 이들을 참조하고 있는 컴포넌트를 재렌더링한다.

- 시간이 오래 걸리는 비동기적 액션을 수행할 수 있다.

 

 

 

 

 

도움받은 자료 👍

 

- 왜 Recoil을 써야 하는가? -웹툰FE

- 리코일(Recoil)은 왜 만든건데? -wooder2050