Recoil

 

 

우선.. 잘가라..

상태 관리 라이브러리로 Redux 를 구현하다가... 문제가 발견되면서 뭔가 내가 수정해서 쓰기에는 구조가 되게 복잡하다는 생각이 들었다.

거기서부터 든 의문점이 왜 상태 관리 라이브러리로 Redux를 많이 사용하는가였고 (구현 용이성은 떨어지나 성능이 뛰어나게 좋다던지 그런 장점이 있는가를 서칭하기 시작함.. ), 그 이유는 단순하게 대부분의 사용자들이 Redux를 사용하니 당연히 기술을 습득하는 입장에서는 '사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라이브러리 혹은 믿을만한 라이브러리'라는 생각을 하게 했기 때문인 듯하다.

 

Redux는 보일러 플레이트 코드를 많이 작성해야하는 아주 큰 단점이 있는데 필요에 따라 Redux를 사용해야할 수도 있겠지만, 서비스 사용량이 그렇게 거대하지 않은 프로그램이나 특정 프로그램의 경우에는 '전역 상태 관리' 기능 하나만을 위해 Redux 체제를 구현하는 것이 너무 과하지는 않은가

 

아무튼 그래서 내가 이번에 개발할 것은 완전 대규모 서비스 도 아닌데다가, 아무리 대용량 서비스에 적용하기는 아직은 무리라는 판단들이 있다고 하더라도 facebook 에서도 Recoil로 상태관리를 구현해뒀는데, 한창 때의 facebook보다 트래픽을 넘어가는 프로그램을 짤 경우가 쉽게 있으려나 하는 생각도 든다.

 

그래서 과감하게 얼레벌레 구현해두었던.. redux saga 와 slice를 삭제하고... Recoil로 변경하는 작업을 해보려고 한다.

 

 

About Redux.

1. React 전용 라이브러리가 아니다. : React 내부 관점에서는 외부요인으로 Store가 취급되며, 동시성 모드를 구현하기에 호환성이 부족하다고 여겨진다.

2. 복잡한 Boiler Plate 초기세팅이 요구된다. : Store, Action, Reducer 등 다양한 구성 요소가 필요해 비효율적이며 러닝커브가 높다.

3. 비동기 데이터에 추가 리소스가 요구된다.: Redux-saga 등 전역 상태에 비동기 데이터를 호출하기 위한 3rd Party 라이브러리가 필요하다.

 

이런 단점을 보완하기 위해서 나온 React에 최적화 된 전역 상태관리 라이브러리가 바로 Recoil 이라고 한다. 

 

---

 

페이스북에서 만든 상태관리 라이브러리로, usestatue를 사용하는 것 만큼 사용이 간단하면서도 상태관리를 효과적으로 할 수 있게 해준다.

전역상태의 설정/정의가 매우 쉬우며, Recoil이 지원하는 Hooks로 이를 get/set하기 때문에 React 문법과 매우 유사하다고 한다.

 

 

공식 Document

https://github.com/facebookexperimental/Recoil

GitHub - facebookexperimental/Recoil: Recoil is an experimental state management library for React apps. It provides several cap

1. 공유상태(Shared State)도 React 내부상태(Local State)처럼 간단한 get/set 인터페이스로 사용할 수 있는 Boilerplate-free API를 제공

2. 동시성 모드(Concurrent Mode)를 비록한 다른 새로운 React의 기능들과의 호환 가능성

3. 상태 정의가 증분 및 분산되므로 코드 분할이 가능

4. 상태를 사용하는 컴포넌트에서 수정할 필요 없이, 상태에서 파생된 데이터를 사용할 수 있음. 또한, 파생된 데이터는 동기/비동기가 모두 가능

5. 탐색을 1급 개념으로 취급할 수 있으며 심지어 링크에서 상태 전환을 인코딩할 수 있음.

6. 역호환성 방식으로 전체 앱 상태를 유지하는 것은 쉬우므로, 유지된 상태는 애플리케이션 변경에도 살아남을 수 있음. (캐싱)

 

 

Recoil의 특징

1. 작고 React스러운: "Recoil은 React처럼 작동하고 생각한다. 앱에 추가하여 빠르고 유연하게 공유가 되는 상태를 사용해보라"

2. 데이터 흐름 그래프: "파생 데이터와 비동기 쿼리는 순수 함수와 효율적인 구독으로 관리가 된다."

3. 교차하는 앱 관찰: "코드 분할을 손상시키지 않고 앱 전체의 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행 취소를 구현한다."

 

나는 이번 서비스에서는 상태관리 혹은 라우팅의 기능으로만 이것을 사용해보도록 할 것인데.. 시간 이동 디버깅이 뭔지 한번 사용해보기 위한 예제를 조만간 만들어보아야겠다.

 

---

https://recoiljs.org/

Recoil

 

 

---

👼 Recoil 시작하기 

 

1. Install 설치

// npm(yarn)
npm install recoil
yarn add recoil

// CDN
<script src="https://cdn.jsdelivr.net/npm/recoil@0.0.11/umd/recoil.production.js"></script>

* Recoil은 Webpack과 같은 모듈 번들러와 호환이 되며 ES6 -> 5 로는 트랜스파일링 되지 않기 때문에 크로스 브라우징을 위해 Babel을 통한 코드 컴파일 과정이 요구된다고 한다.

 

 

2. Apply 적용

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

import App from './App';
import { Provider } from "react-redux";
import store from "./utils/store";
import history from "./utils/history";

import {CookiesProvider} from 'react-cookie';
import './index.css';

import { RecoilRoot } from 'recoil';
// 1. recoil 사용 포인트 1

ReactDOM.render(
  <RecoilRoot>							//2. recoil 사용 포인트
    <React.StrictMode>
      <CookiesProvider>
        <Provider store={store}>
          <Router history={history}>
            <App />
          </Router>
        </Provider>
      </CookiesProvider>
    </React.StrictMode>
  </RecoilRoot>,						//2. recoil 사용 포인트
  document.getElementById('root')
);

reportWebVitals();

코드가 매우 덕지덕지이다.

아무튼 사용하기 위해서는 recoil을 불러와서 index.js 파일의 <App/> 컴포넌트를 <RecoilRoot> 로 감싸주면 된다.

 

 

3. Concept 핵심개념

본격적인 구현을 위하여 ./src 내에 recoil 폴더를 만들어서 전역상태에 관련된 Atoms, Selector 들을 설정해주어야 한다.

 

Recoil 사용 시
Atom(공유 상태)에서 Selector(순수 함수)를 거쳐 React Component로 내려가는 Data-flow Graph를 만들 수 있다.
- Atoms는 컴포넌트가 구독할 수 있는 상태의 단위
- Selectors는 Atoms 상태 값을 동기 혹은 비동기 방식을 통해 변환

- Recoil에서 지원하는 Hooks들로 atom 혹은 selector의 get(접근) 및 set(수정) 등의 다양한 동작이 가능해진다.

 

(1) Atoms 설정

  key와 default를 설정해주어야 한다.

// /src/recoil/index.js

import { atom } from "recoil";

export const articleStates = atom({
    key: 'articleState',
    default: [],
})

export const commentStates = atom({
    key: 'commentState',
    default: [],
  })

* default 값은 Promise 객체도 설정 가능하나, atom에서 바로 비동기 요청을 할 수는 없다. 

 

(2) 전역상태 관련 hooks

 

1. useRecoilState

    - Atom의 상태를 구독. useState Hook과 같이 배열의 첫번째 파라미터로 상태, 두번째 파라미터로 상태에 대한 setter 함수를 반환.

2. useRecoilValue

   - setter 함수 없이 Atom의 상태만 반환

3. useSetRecoilState

   - atom 상태 없이 setter 함수만 반환

4. useResetRecoilState

   - atom 상태를 default 상태로 reset