리코일(Recoil) 기초

Recoil이란?

Recoil is a state management library for React (리코일은 리액트를 위한 상태 관리 라이브러리다.)

 

목표

1. Flexible shared state

React에서 공유된 상태(shared state)를 사용하기 위해 Context Provider를 사용한다. 그러나 Provider가 점점 많아지면 층층이 쌓이면 사이에 걸쳐있는 불필요한 컴포넌트들까지 리렌더링이 발생한다.

Recoil은 이를 해결하기 위해서 React state와는 수직적인 방향으로 상태를 관리한다. (수직적이라는 것은 위 그림에서 보듯이 React 상태 트리가 바닥면이고 Recoil의 상태는 위에서 아래로 수직으로 내려오는 모양을 말하는 것이다. 따라서 React 상태의 영향을 받지 않고 필요한 부분에만 상태를 전달한다는 것을 의미하는 것이다.)

Recoil은 컴포넌트를 둘러싼 모든 컴포넌트를 리렌더링할 필요가 없다. 오로지 상태를 구독중이 컴포넌트만 업데이트를 시킨다. Recoil이 관리하는 상태는 atom이라고 하며 위 그림에서 backgroundColor가 이에 해당한다.

2. Derived Data

가끔 불필요하게 상태를 만드는 경우가 생긴다. 하나의 상태 변화가 다른 여러 상태의 변화를 초래하는 경우가 그렇다. (가령 가로 세로 비율을 맞춰줘야 하는 경우의 height, width 상태 값들.) 이 때 의존성 문제가 발생할 수도 있고 여러 상태를 관리하다가 버그를 만들 수도 있다.

Recoil은 selector를 이용해서 이 문제를 해결한다. selector는 **순수 함수(pure function)**이기 때문에 항상 같은 input에 대해 같은 output을 가진다. selector는 단순히 값을 계산하는 것 뿐 아니라, 서버 작업도 가능하다. 따라서 racing condition같은 건 걱정하지 않아도 된다.

3. App-wide Observation

라우팅 url에 따라 상태를 받아오고 업데이트해줄 수 있다. 또한 time-travel 디버깅도 가능하며 여러 상태를 관측하는 것이 가능해진다.

 

Atoms

Atoms는 앱 상태 정보의 원천(source of truth)을 포함하며 Recoil 상태의 기본 단위다.

Atoms을 만들기 위해서는 key와 default 값을 가져야 한다. key는 말 그대로 atom을 구별하기 위한 유니크한 값이다(string임). key는 계속해서 같은 상태를 유지할 수 있도록 도와준다. default 값을 작성하면 atom은 이 값으로 상태를 초기화하거나 폴백값으로 셋팅된다.

atom의 값을 읽는 컴포넌트는 해당 atom을 구독하고 있는 것과 마찬가지다. 그래서 atom이 업데이트되면 해당 atom을 구독하는 모든 컴포넌트들이 리렌더링 된다.

 

Selector

파생된 상태를 나타낸다. 파생된 상태라는 것은 곧 한 상태 값의 변화형이라고 할 수 있다. 상태는 selector를 거쳐 pure function를 지나면서 값이 업데이트 된다.

 

Functions

• useRecoilValue : 값을 읽어오고 싶을 때
• useSetRecoilState : 값을 업데이트 하고 싶을 때
• useRecoilState : 둘 다 하고싶을 때 (hook의 setState 느낌)