1인 프로젝트 개발을 하던 중 전역 상태 관리가 필요해진 시점에서 누군가 나에게 말했다 useRecoil을 쓴다면 편하게 전역관리를 할 수 있으니 시도해보지 않겠냐고

'상태 관리'에 대한 정의

• 애플리케이션의 동작 방식을 설명하는 모든 데이터

• David Khourshid - 상태관리는 시간이 지남에 따라 상태가 변경되는 방식이다.

• 상태 '관리'가 되려면 기본적으로 3가지 기능을 해야한다.

  • 최초 값(initial value)를 저장
  • 현재 값(current value)를 읽기
  • 값을 업데이트

그렇다면 Recoil은 왜필요한가?

• React의 내장 상태 관리 '기능'의 한계점 극복
• 그 중에 최대한 React스러운 API 유지
  • 어떠한 특별한 runningCommand없이 간단하게 접근이 가능하다.
• 사용하기 위한 부속 라이브러리 최소화

React 상태 관리 로직의 한계점

• 컴포넌트의 상태는 공통되는 부모 컴포넌트까지 올라가야하는데, 심할 경우 애플리케이션 상단까지 올라가야하는 문제가 발생할 수 있음
• Context API는 확정되지 않은 수의 값을 저장하는데 적합하지 않으며, 최적화 관점의 한계점이 명확함
  • Context API는 각 상태마다 Context Provider가 필요한데, 상태가 1000개라면 1000개의 Provider를 선언해야한다.
  • 상태가 변경될 때마다 캐싱 없이 매번 re-rendering 한다.
• Redux는 별도의 라이브러리가 필요하고 초기 구축, 유지 보수 과정에서 boilerplate 코드를 많이 작성해야 한다.
  • React concurrent renderer를 지원하지 않는다.

Recoil의 접근 방법

• Recoil은 React Tree에 직교되는 형태로 존재하는 방향 그래프(Directed Graph)로 구성되어 있다.
• 상태의 변경은 이 그래프를 따라 React Component로 흘러 들어간다.
  • 다양한 장점들이 있지만, 가장 큰 장점으로 Component쪽의 로직을 건드리지 않고 상태 데이터를 단독으로 변경할 수 있다는 큰 장점이 있다.

Recoil의 철학

• boilerplate가 적은 API면서 React의 로컬 상태(useState, useReducer) 유사한 간단한 인터페이스
• Concurrent Mode와 호환
• 코드 상호간의 낮은 결합도를 통해 Code splitting 용이성 확보
• 파생 데이터를 사용함으로써 데이터를 사용하는 컴포넌트에서 임의로 데이터를 바꾸는 로직을 가져가지 않아도 된다.
  • 가져와서 useEffect로 바꿔주기를 하지 않고, 로직 자체를 Recoil atom에 귀속시킬 수 있다.

// 기존 useEffect로 업데이트 해줘야하는 점
useEffect(() => {
  (async () => {
      await updateState();
      await updateAnotherState();
  }) ();
}, []);

// 업데이트 필요없이 useState와 유사한 업데이트 방식
const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelsius = selector({
  key: 'tempCelsius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
});

function TempCelsius() {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  const [tempC, setTempC] = useRecoilState(tempCelsius);
  

Core Concept

Atom

• 데이터를 보관하는 기본 단위
• Redux로 따지자면 store와 유사한 개념으로 상태의 단위를 뜻한다.
• atom이 업데이트 된다면 해당 atom을 구독하고 있던 모든 Component의 state가 업데이트 된다.
• 유니크한 id인 key값으로 구분되는 각 atom은 여러 컴포넌트에서 해당 atom을 구독하고 있다면 그 컴포넌트도 똑같은 상태를 유지한다.

state.js

export const cookieState = atom({
  key: 'cookieState',
  default: []
});

Cookie.js

import React from 'react'
import { cookieState } from '../../state';
import { useRecoilState } from 'recoil';

const Cookie = () => {
	const [cookies, setCookies] = useRecoilState(cookieState);
  
  return(
    <div>
        {cookie.map(cookie => (
          <Card
            cookies={cookie}
            key={cookie.id}
            idx={cookie.id}
           />
       ))}
      </div>
  );
}
export default Cookie;

Selector

• selector는 atom을 전/후 처리하여 새로운 값을 리턴하거나 기존 atom의 값을 수정할 때 사용한다.
  • atom의 값이 최신화 되면 selector의 값 또한 최신화되어 편하게 사용할 수 있다.
• selector를 사용하면 atom을 직접 변경하지 않기 때문에 불변성 유지가 가능하다.
• selector는 순수함수로 같은 입력이 들어오면 해당 입력에 대한 출력은 항상 같은 함수라는 것을 의미한다.
• selector는 read-only한 RecoilValueReadOnly 객체로써 return값 만을 가질 수 있고 값을 set 할 수 없는 특징이 있다.

export const sampleState = atom({
  key: "sampleState",
  default: 0,
});

export const sampleSelector = selector({
  key: "sampleSelector",
  get: ({ get }) => get(sampleState) * 2,
  set: ({ set }, newValue) => set(sampleState, newValue / 2),
});

마치며

useRecoil에 대해서 알아보니 편리한 사용성과 간단한 로직이 마음에 들었다. 간결한 코드와 컴포넌트의 로직을 건드리지 않고 상태관리를 할 수 있단 점이 마음에 들었고 아직 기초적인 것만 활용해 잘은 모르지만 이를 활용해 프로젝트를 구현해보려고 한다.