[React/Recoil] Recoil 을 상태관리 라이브러리로 선택한 이유

Recoil 로고

상태관리 라이브러리로 Recoil 을 선택하다.

 

1. Recoil 이란?

Recoil은 Facebook(현 Meta)에서 개발한 React 애플리케이션용 상태 관리 라이브러리다. Atom 및 Selector의 개념을 도입하여 응용 프로그램의 상태를 효율적이고 유연하게 관리할 수 있는 방법을 제공한다. Value, Array, String, Object와 같은 모든 유형의 데이터를 저장할 수 있는 변수와 유사한 Atom 으로 정의할 수 있도록 한다. 이러한 Atom은 각 Component에서 접근 가능하고 수정이 가능하다. 구독한 Atom에 대해 변경이 일어나면 각 Component들이 Re-Rendering된다.

https://recoiljs.org/ko/docs/introduction/core-concepts/

주요 개념 | Recoil

Atom

또 하나는 Selector라는 개념이 있다. API통신과 같은 비동기 처리 부분은 selector를 통해 한 번에 처리할 수 있다. Selector 내의 get에 data를 fetch하는 비동기 함수를 넣어놓고 set에는 atom에 상태 값을 저장하는 함수를 넣어 놓는다. 주의할 점은 selector는 순수 함수여야한다. selector는 반드시 read-only한 값만 return 하며 set으로는 writeable한 atom의 RecoilState 설정할 수 있다.

---

아래는 카운터 값을 가져오고 업데이트시켜주는 예제다.

import { useRecoilState } from 'recoil';
import { counterState } from './atoms';

function Counter(): JSX.Element {
  const [counter, setCounter] = useRecoilState(counterState);

  const increment = (): void => {
    setCounter(counter + 1);
  };

  const decrement = (): void => {
    setCounter(counter - 1);
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

import { atom } from 'recoil';

export const counterState = atom<number>({
  key: 'counterState',
  default: 0,
  get: ({ get }) => {
    return get(counterState);
  },
  set: ({ set }, newValue) => {
    set(counterState, newValue);
  },
});

전반적으로 Recoil은 React 애플리케이션에서 상태를 관리하는 간단하고 효율적인 방법을 제공하는 강력한 상태 관리 라이브러리다. 혁신적인 접근 방식, 유연성 및 React와의 원활한 통합으로 인해 개발자들 사이에서 인기 있는 선택이 되었다.

---

반응형

2. Recoil과 Redux의 차이

1. 상태 관리 모델 : Recoil은 상태가 가변 변수에 보관되고 set 함수로 업데이트되는 "mutable(변동가능한) source of truth" 모델을 사용한다. 반대로 Redux는 상태가 불변 저장소에 저장되고 "Reducer"라는 순수 함수로 업데이트되는 "immutable store(불변 저장소)" 모델을 사용한다.
2. 사용 용이성 : Recoil은 일반적으로 Redux보다 사용하기 쉬운 것으로 간주된다. Recoil은 더 간단한 API를 제공하여 상태 관리 프로세스를 단순화하는 반면 Redux는 더 많은 상용구 코드와 더 복잡한 API가 필요하다.
3. 성능 : Recoil은 성능에 최적화되어 있으며 종속성이 변경될 때만 구성 요소를 다시 렌더링할 수 있는 자동 종속성 추적 기능을 제공한다. 반대로 Redux는 자동 종속성 추적 기능이 없으며 유사한 성능 향상을 달성하기 위해 'reselect'와 같은 외부 라이브러리를 사용해야 한다.
4. 확장성 : 두 라이브러리 모두 확장 가능하지만 서로 다른 방식으로 접근한다. Recoil은 비동기 선택기 및 모듈화를 장려하는 API와 같은 기능을 제공하여 크고 복잡한 애플리케이션에서 작동하도록 설계되었다. Redux는 또한 모듈화를 장려하고 대규모 애플리케이션을 처리하도록 확장할 수 있는 정의된 구조를 가지고 있다.
5. React와의 통합 : Recoil은 React와 잘 작동하도록 특별히 설계되었으며, 해당 API는 React 구성 요소와 직관적이고 사용하기 쉽게 설계되었다. Redux는 React와 함께 사용할 수도 있지만 추가 구성 및 설정이 필요하다.

---

3. Recoil 장단점

장점

• Recoil은 React와 함께 사용하기 쉬운 간단하고 직관적인 API를 제공한다.
• Recoil은 자동 종속성 추적 및 모듈성을 장려하는 디자인으로 성능에 최적화되어 있다.
• Recoil은 다른 상태 관리 라이브러리보다 더 쉽게 작업할 수 있는 가변 진실 모델을 사용한다.
• Recoil은 Facebook에서 유지 관리하므로 향후 잘 지원되고 업데이트될 가능성이 높다.
• Recoil은 오픈 소스이며 무료로 사용할 수 있다.

단점

• Recoil은 비교적 새로운 라이브러리이며 Redux와 같은 다른 상태 관리 솔루션보다 작은 커뮤니티를 가지고 있다.
• 반동은 가변 진실 모델이 더 크거나 더 복잡한 응용 프로그램에서 상태 변경에 대해 추론하기 어렵게 만들 수 있으므로 모든 응용 프로그램에 적합하지 않을 수 있다.
• Recoil에는 Redux와 같은 기존 라이브러리만큼 사용할 수 있는 타사 도구나 플러그인이 많지 않다.
• Recoil은 다른 상태 관리 라이브러리 작업에 익숙한 개발자에게는 익숙하지 않을 수 있다.
• Recoil은 'Proxy' API를 지원하는 최신 브라우저가 필요하며 이전 브라우저에서는 사용하지 못할 수 있다.