Recoil

context API

context api 단점은 context를 구독하고 있는 하위의 모든것이 재 랜더링 된다. 성능상 문제가 생길 수 있음

낮은 빈도의 업데이트에 적합하다. (정적인 값, 구독을 통해 업데이트를 전파하는 것)

한계

• 상태 공유를 위해 상위요소까지 끌어올리면 트리가 다 재렌더 될수도있다.
• context는 단일 값만을 저장할 수 있고, 자체 Consumer를 자기는 여러가지 집합은 담을 수 없다.
• 최상단부터 트리의 잎까지 코드 분할이 어렵다.

Redux한계

store는 외부 요인으로 취급되기때문에 React의 내부 스케줄러에 접근 할 수 없다. Recoil은 내부적으로 React의 상태를 사용하고 있다.

또한 많은 보일러플레이트 코드를 사용해야한다. 그리고 비동기 데이터 처리 또는 계산된 값 캐시와 같은 중요한 기능은 라이브러리 기능이 아니며, 이를 해결하기위해 또 다른 라이브러리를 사용해야 한다.

Recoil

• 그래프 뿌리 (atom)으로 부터 순수함수를 거쳐 컴포넌트로 흐른다.
• 어플리케이션을 RecoilRoot로 감싸고, 데이터를 atom이라는 단위로 선언하며, useState를 Recoil의 useRecoilState로 대체해야한다.
• 컴포넌트가 사용하는 데이터 조각만 사용가능
• 계산된 selector를 선언할수있음
• 비동기 데이터 흐름을 위한 내장 솔루션 제공

개요

atom(컴포넌트가 구독할 수 있는 상태의 단위)에서 selectors(순수함수)를 거쳐 React컴포넌트로 내려가는 data-flow graph를 만들 수 있다.

Atom

recoil의 상태단위. 컴포넌트가 구독할 수 있는 React state이다.

스토어에서 저장되고 갱신되는 데이터는 모두 Atom기반으로 한다.

아톰이 갱신될때 그 상태를 구독하고 있는 새로운 컴포넌트는 새로운 값으로 리턴된다.(리렌더링)

아톰은 atom()함수에 key와 default를 전달해서 작성한다.

useRecoilState — atom의 값을 구독하여 업데이트할 수 있는 hook. useState와 동일한 방식으로 사용할 수 있다.

useRecoilValue — setter 함수 없이 atom의 값을 반환만 한다.

useSetRecoilState — setter 함수만 반환한다.

selector

상태기반으로 전달된 데이터를 가공할 때 사용 됨

get 프로퍼티는 계산에 사용되는 함수. 전달된 get인수를 사용해서 atom이나 selector에 접근할 수 있으며, 접근한 아톰이나 셀렉터가 업데이트 되면 다시 계산된다.

 

 

<예시>

store.js

import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil';

export const memoTextState = atom({
  key: 'memoTextState',
  default: '',
});
export const addHeartState = selector({
  key: 'addHeartState',
  get: ({ get }) => {
    const text = get(memoTextState);

    return text + '♥';
  },
});

App.vue

import logo from './logo.svg';
import React, { Fragment } from 'react';
import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil';
import Main from './views/Main';
function App() {
  return (
    <RecoilRoot>
      <Main />
    </RecoilRoot>
  );
}
export default App;

Main.vue

import React, { Fragment } from 'react';
import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil';
import { memoTextState, addHeartState } from '../store/store';
function Main() {
  const [memoText, setMemoText] = useRecoilState(memoTextState);
  const heartText = useRecoilValue(addHeartState);

  const onChange = (e) => {
    console.log(e);
    setMemoText(e.target.value);
  };
  return (
    <>
      <center>
        <h1>Todo List</h1>
        <div>memo : {memoText}</div>
        <div>memo add Heart: {heartText}</div>
              <input type="text" ng-model="todoFld" placeholder="Add todo here!" onChange={onChange} />
      </center>
    </>
  );
}

export default Main;