Recoil.til

Universe·2023년 3월 21일
0

Recoil ?

페이스북에서 개발한 리액트용 클라이언트 사이드 상태 관리 라이브러리.
Atom과 Selector 키워드로 상태관리를 한다. "보다 리액트스럽게" 가 라이브러리의 모토.

사용목적

프로젝트에서 리액트 쿼리와 리코일을 함께 사용하게 됐는데,
서로의 장점을 극대화하고 부족한 부분을 보완할 수 있다고 생각했기 때문이다.

리액트 쿼리는 서버 데이터 관리에 초점을 맞추어 설계됐다.
데이터 패칭, 캐싱, 서버와의 동기화 등의 서버 사이드 상태관리를 위한 기능을 제공하며
이러한 작업들을 효과적으로 처리할 수 있다.
반면에 리코일은 클라이언트 상태관리를 위해 설계되어 Atom과 Selector를 활용한
직접적인 클라이언트 상태관리를 지원한다. 상태 트리를 구성하여 관련 상태를 구독하고
그룹화하여 관리할 수 있다.

부연설명을 하자면, 리코일은 기본적으로 캐싱 기능을 제공하지만 자동 캐시관리나
서버 데이터 동기화 등의 기능이 부족한 측면이 있다. 이런 부분을 리코일로 보완하자는 것.
반면에 리액트 쿼리는 서버 상태관리에 초점을 맞추어 개발되어 UI 상태와 관련된
작업에 대한 직접적인 지원이 부족하다. 이 또한 리코일로 보완할 수 있다.

또 한가지 얻을 수 있는 장점은 명확하게 경계를 설정할 수 있다는 점에 있다.
리액트 쿼리로 서버 데이터를 관리하고, 리코일로 클라이언트 UI 상태를 관리함으로써
프로젝트의 구조를 보다 깔끔하고 직관적으로 유지할 수 있다.

기본적인 문법

  1. Atom
const counterState = atom({
  key: 'counterState',
  default: 0,
});

리코일의 가장 기본적인 상태 단위.
상태를 저장하고 각자의 고유한 키를 가지게 된다. 리코일은 키를 통해 상태값을 식별한다.

  1. 사용법 (useRecoilState)
import { useRecoilState } from 'recoil';
import { counterState } from './state';

function Counter() {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

React 를 공부하다보면 정말 많이 사용하게 되는 그 패턴.
useState와 아주 유사하다. 심지어 활용방법도 비슷하다.
상태값만 읽기 전용으로 사용하고 싶다면 useRecoilValue,
setter Function만 사용하고 싶다면 useSetRecoilState 같은 Hook도 있다.

  1. 파생상태 (selector)
const doubledCounterState = selector({
  key: 'doubledCounterState',
  get: ({ get }) => {
    const count = get(counterState);
    return count * 2;
  },
});

redux 에서 자주보던 그 selector와 유사하다.
다른 상태를 기반으로 파생 상태를 만들어내는 역할을 한다.
그런데 Recoil은 이 selector를 이용해 redux와 다르게 양방향 데이터 흐름을 가지게 설계할 수 있다.

const counterWithMultiplierState = selector({
  key: 'counterWithMultiplierState',
  get: ({ get }) => {
    const count = get(counterState);
    const multiplier = 2;
    return count * multiplier;
  },
  set: ({ set, get }, newValue) => {
    const multiplier = 2;
    set(counterState, newValue / multiplier);
  },
});

위와같이 set 속성을 이용해 반대로 get state를 변경할 수도 있다.
조금 복잡하지만 상태간의 연관성을 생각하여 설계한다면 보다 효율적인 코드를 구현할 수 있다.

마무리

비록 큰 규모의 애플리케이션에서 복잡한 상태관리에 대응하기 어렵다는 평이 있지만
러닝커브가 다른 상태관리 라이브러리에 비해 정말 낮은 편이고,
리덕스 툴킷처럼 추가적인 미들웨어를 사용하지 않아도 되는데다가,
"보다 리액트스럽게" 쉽고 효율적인 상태관리를 할 수 있다는 점에서 큰 점수를 주고싶다.

profile
Always, we are friend 🧡

0개의 댓글