상태관리 라이브러리 비교

[JUDONGHYEOK]

상태관리 라이브러리 사용 목적

1. 다중 계증 컴포넌트에서 데이터와 메소드 접근의 복잡성 해결
   • 여러개의 컴포넌트가 조합되어 페이지가 구성된다고 할때 Component간 상호작용 즉 데이터와 메소드의 접근이 까다롭게 된다. 부모자식간의 관계로 scope가 이루어져 있기 때문에 각 컴포넌트간 state와 method 접근이 복잡해질 수 있다.
2. 컴포넌트에 집중된 비즈니스 로직 분리

컨텍스트api

• 리액트의 기본으로 제공되는 상태 관리
• context는 react 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법
• context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 사용해야 한다.
• 여러 레벨에 걸쳐 props넘기는 걸 대체하는데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다.
• 컴포넌트 합성 - 제어의 역전
• 이는 항상 옳은 것은 아니다 복잡한 로직을 상위로 옮기면 상위 컴포넌트들은 난해해지고 하위 컴포넌트들은 필요 이상으로 유연해져야 한다.

    const MyContext = React.createContext(defaultValue);
    <MyContext.Provider value={/* 어떤 값 */}>
    

• 다시 렌더링할지 여부를 정할 때 참조를 확인하기 때문에, Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가 발생할 수도 있다.

• Context API는 단순히 종속성 주입의 한 형태일뿐 아무것도 관리하지 않는다. 일반적으로 useState, useReducer를 통해 일어난다.

리덕스

• 2015년 React + Flux의 구조에 reducer를 결합한 Redux가 등장한다.
• 대표적인 flux 패턴
• 리덕스의 3가지 규칙
  • 하나의 애플리케이션 안에는 하나의 스토어가 있다.
  • 상태는 읽기전용이다. - shallow equality
  • 변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.
• 복잡한 state관리를 단방향 데이터 흐름체계로 만들어주는 도구이다.
• 구조가 간단한 경우에는 React만으로도 충분히 단방향 데이터 흐름을 사용할 수 있다.
• 웹 구조와 흐름을 파악하고 설계과정에서 Redux의 사용여부를 결정하는 것이 좋은 애플리케이션을 구성하는데 도움을 준다.
• 상태를 읽기 전용으로 취급하여 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 된다.
• Redux Devtool을 제공하여 상태 변경을 모니터링할 수 있다.
• 단점
  • 보일러 플레이트 - RTK가 어느정도 해결
  • Redux는 상태를 읽기 전영으로 취급할 뿐 실제 읽기 전용으로 만들어주지는 않는다. 때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야 한다. - Immutable.js를 사용하기도 함
  • 상태 관리를 중앙화하는 것만 있어도 된다면 Context API를 사용한다.
  • 액션: 상태에 어떠한 변화가 필요하게 될 때 액션을 발생시킨다.
  • 액션 생성함수: 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

    export function addTodo(data) {
      return {
        type: "ADD_TODO",
        data
      };
    }
    
    // 화살표 함수로도 만들 수 있습니다.
    export const changeInput = text => ({ 
      type: "CHANGE_INPUT",
      text
    });

• 리듀서: 변화를 일으키는 함수

    function counter(state, action) {
      switch (action.type) {
        case 'INCREASE':
          return state + 1;
        case 'DECREASE':
          return state - 1;
        default:
          return state;
      }
    }

    /* 액션 타입 만들기 */
    // Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요.
    // 이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있습니다.
    const SET_DIFF = 'counter/SET_DIFF';
    const INCREASE = 'counter/INCREASE';
    const DECREASE = 'counter/DECREASE';
    
    /* 액션 생성함수 만들기 */
    // 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.
    export const setDiff = diff => ({ type: SET_DIFF, diff });
    export const increase = () => ({ type: INCREASE });
    export const decrease = () => ({ type: DECREASE });
    
    /* 초기 상태 선언 */
    const initialState = {
      number: 0,
      diff: 1
    };
    
    /* 리듀서 선언 */
    // 리듀서는 export default 로 내보내주세요.
    export default function counter(state = initialState, action) {
      switch (action.type) {
        case SET_DIFF:
          return {
            ...state,
            diff: action.diff
          };
        case INCREASE:
          return {
            ...state,
            number: state.number + state.diff
          };
        case DECREASE:
          return {
            ...state,
            number: state.number - state.diff
          };
        default:
          return state;
      }
    }

    // Presentional Component
    
    function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) {
      const onChange = e => {
        // e.target.value 의 타입은 문자열이기 때문에 숫자로 변환해주어야 합니다.
        onSetDiff(parseInt(e.target.value, 10));
      };
      return (
        <div>
          <h1>{number}</h1>
          <div>
            <input type="number" value={diff} min="1" onChange={onChange} />
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
          </div>
        </div>
      );
    }
    
    export default Counter;

    import { useSelector, useDispatch } from 'react-redux';
    import Counter from '../components/Counter';
    import { increase, decrease, setDiff } from '../modules/counter';
    
    function CounterContainer() {
      // useSelector는 리덕스 스토어의 상태를 조회하는 Hook입니다.
      // state의 값은 store.getState() 함수를 호출했을 때 나타나는 결과물과 동일합니다.
      const { number, diff } = useSelector(state => ({
        number: state.counter.number,
        diff: state.counter.diff
      }));
    
      // useDispatch 는 리덕스 스토어의 dispatch 를 함수에서 사용 할 수 있게 해주는 Hook 입니다.
      const dispatch = useDispatch();
      // 각 액션들을 디스패치하는 함수들을 만드세요
      const onIncrease = () => dispatch(increase());
      const onDecrease = () => dispatch(decrease());
      const onSetDiff = diff => dispatch(setDiff(diff));
    
      return (
        <Counter
          // 상태와
          number={number}
          diff={diff}
          // 액션을 디스패치 하는 함수들을 props로 넣어줍니다.
          onIncrease={onIncrease}
          onDecrease={onDecrease}
          onSetDiff={onSetDiff}
        />
      );
    }
    
    export default CounterContainer;

• 비동기 작업일 경우

    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import { createStore, applyMiddleware } from 'redux';
    import { Provider } from 'react-redux';
    import rootReducer from './modules';
    import logger from 'redux-logger';
    import { composeWithDevTools } from 'redux-devtools-extension';
    import ReduxThunk from 'redux-thunk';
    
    const store = createStore(
      rootReducer,
      // logger 를 사용하는 경우, logger가 가장 마지막에 와야합니다.
      composeWithDevTools(applyMiddleware(ReduxThunk, logger))
    ); // 여러개의 미들웨어를 적용 할 수 있습니다.
    
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
    
    serviceWorker.unregister();

    // 포스트 여러개 조회하기
    const GET_POSTS = 'GET_POSTS'; // 요청 시작
    const GET_POSTS_SUCCESS = 'GET_POSTS_SUCCESS'; // 요청 성공
    const GET_POSTS_ERROR = 'GET_POSTS_ERROR'; // 요청 실패
    
    export const getPosts = () => async dispatch => {
      dispatch({ type: GET_POSTS }); // 요청이 시작됨
      try {
        const posts = await postsAPI.getPosts(); // API 호출
        dispatch({ type: GET_POSTS_SUCCESS, posts }); // 성공
      } catch (e) {
        dispatch({ type: GET_POSTS_ERROR, error: e }); // 실패
      }
    };
    
    const initialState = {
      posts: {
        loading: false,
        data: null,
        error: null
      }
    }
    
    export default function posts(state = initialState, action) {
      switch (action.type) {
        case GET_POSTS:
          return {
            ...state,
            posts: reducerUtils.loading()
          };
        case GET_POSTS_SUCCESS:
          return {
            ...state,
            posts: reducerUtils.success(action.payload) // action.posts -> action.payload 로 변경됐습니다.
          };
        case GET_POSTS_ERROR:
          return {
            ...state,
            posts: reducerUtils.error(action.error)
          };
    	}
    }

mobx

• 장점
  • 객체지향적 코드 작성 가능: Class를 객체지향적으로 사용하고 개발하는 것을 권장한다. 도메인 모델로 분리됨으로 써 집중된 비즈니스 로직은 적절히 분산되고 도메인간의 상호작용은 message를 주고 받는 형태로 구현 할 수 있다.
  • Java Spring Framework와 유사한 아키텍쳐 구조를 지향하고 있어 서버개발자들에게 보다 친숙하고 낮은 러닝커브를 제공한다.
  • 보일러플레이트 코드가 사라지고 데코레이터가 처리하기 때문에 깔끔한 코드가 생성된다.
  • Mobx Configuration 설정으로 state를 오직 메소드를 통하여 변경할 수 있도록 Private하게 관리할 수 있다.
• 단점
  • 디버깅 툴이 불편하다.
  • 코드가 더러워지기 쉽다.
  • 레퍼런스가 거의 없다.

리코일

• 리액트에서 제공하는 상태관리 라이브러리이다.
• 기존의 redux와 Mobx의 store가 외부요인으로서 취급되기 때문에 React의 스케줄러에 접근할 수 없었다. 하지만 동시성 모드가 등장하면서 이에 대한 중요성이 대두되었다. Recoil은 React의 상태를 사용하고 있으므로 스케줄러에 접근이 가능하다.
• Atom: 하나의 상태, 컴포넌트가 구독할 수 있는 React State

    export const nameState = atom({
      key: 'nameState',
      default: 'Jane Doe'
    });

• useRecoilState - atom의 값을 구독하여 업데이트할 수 있는 hook
• useRecoilValue - setter 함수 없이 atom의 값을 반환
• useSetRecoilState - setter 함수만 반환

    import {nameState} from './someplace'
    // useRecoilState
    const NameInput = () => {
      const [name, setName] = useRecoilState(nameState);
      const onChange = (event) => {
       setName(event.target.value);
      };
      return <>
       <input type="text" value={name} onChange={onChange} />
       <div>Name: {name}</div>
      </>;
    }
    // useRecoilValue
    const SomeOtherComponentWithName = () => {
      const name = useRecoilValue(nameState);
      return <div>{name}</div>;
    }
    // useSetRecoilState  
    const SomeOtherComponentThatSetsName = () => {
      const setName = useSetRecoilState(nameState);
      return <button onClick={() => setName('Jon Doe')}>Set Name</button>;
    }

• selector - selector는 상태에서 파생된 데이터로, 다른 atom에 의존하는 동적인 데이터를 만들 수 있게 함

    // 동물 목록 상태
    const animalsState = atom({
      key: 'animalsState',
      default: [{
        name: 'Rexy',
        type: 'Dog'
      }, {
        name: 'Oscar',
        type: 'Cat'
      }],
    });
    // 필터링 동물 상태
    const animalFilterState = atom({
     key: 'animalFilterState',
     default: 'dog',
    });
    // 파생된 동물 필터링 목록
    const filteredAnimalsState = selector({
     key: 'animalListState',
     get: ({get}) => {
       const filter = get(animalFilterState);
       const animals = get(animalsState);
       
       return animals.filter(animal => animal.type === filter);
     }
    });
    // 필터링된 동물 목록을 사용하는 컴포넌트
    const Animals = () => {
      const animals = useRecoilValue(filteredAnimalsState);
      return animals.map(animal => (<div>{ animal.name }, { animal.type    }</div>));
    }

    const fetchMenu = selectorFamily({
      key: 'fetchMenu',
      get: (id: number) => async ({}) => {
        const menu = await 서버에서_메뉴_가져오기(id) 👈🏻
        return menu
      },
    })
    
    const Menu = () => {
      const menu = useRecoilValue(fetchMenu(10)) 👈🏻
    
      return (
        <div>
          <div>{menu.food} : {menu.price}원</div>
        </div>
    	)
    }

• 장점
  • 배우기 쉽다
    • API가 단순하다
  • React처럼 행동하고 느낀다.
    • 동시성 모드 지원
  • 캐싱 지원
  • 선언적 프로그래밍
• 단점
  • 개발자 도구가 완벽하지 않다
  • 모든 API들이 높은 신뢰성을 보장하지 않는다.

zotai

• 리코일과 매우 유사, 일본어로 상태, atomic model 기반의 상향식 접근 방법
• Kent C. Dodds가 선호한다.
• tearing: 동시성 모드에서 컴포넌트의 렌더트리가 외부 상태 업데이트를 통해 갱신되는 도중 다른 업데이트가 발생하여 렌더링이 깨진듯한 현상

    const priceAtom = atom(10)
    const messageAtom = atom('hello')
    const productAtom = atom({ id: 12, name: 'good stuff' })
    
    // primitive 타입의 atom은 아래와 같은 형태로 생성
    const primitiveAtom = atom(initialValue)

• atom을 생성할 때 key가 필요없다.

const urlAtom = atom('<https://json.host.com>')
const fetchUrlAtom = atom(async (get) => {
  const response = await fetch(get(urlAtom))
  return await response.json()
})

const countAtom = atom('')

const Layout = () => {
  // 아래의 atom은 fallback을 트리거링 합니다.
	const writeAtom = atom(null, async (get, set) => {
	  const response = await new Promise<string>((resolve, _reject) => {
	    setTimeout(() => {
	      resolve('some returned value')
	    }, 2000)
	  })
	  set(countAtom, 'The returned value is: ' + response)
	})

	return (<>
		<button onClick={writeAtom}>increase</button>
	</>)
}

const Component = () => {
  const [, increment] = useAtom(asyncIncrementAtom)
}
const App = () => (
  <Provider>
    <Suspense fallback="Loading...">
      <Layout />
    </Suspense>
  </Provider>
)

• atom이 atom을 포함할 수 있고 atom들의 array, object로 관리될 수 있어서 atom으로 관리되는 상태들은 상향식 접근으로 확장할 수 있다.

const countsAtom = atom([atom(1), atom(2), atom(3)])

const Counter = ({ countAtom }) => {
  const [count, setCount] = useAtom(countAtom)
  return (
    <div>
      {count} <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  )
}

const Parent = () => {
  const [counts, setCounts] = useAtom(countsAtom)
  const addNewCount = () => {
    const newAtom = atom(0)
    setCounts((prev) => [...prev, newAtom])
  }
  return (
    <div>
      {counts.map((countAtom) => (
        <Counter countAtom={countAtom} key={countAtom} />
      ))}
      <button onClick={addNewCount}>Add</button>
    </div>
  )

• 여러개의 Counter 중 업데이트가 발생하는 Counter만 리렌더링 할 수 있음

zustand

• 독일어로 상태
• 특정 라이브러리에 엮이지 않고 react와 함께 쓸 수 있는 API를 제공한다.
• 중앙 집중 스토어
• 불필요한 리렌더링 방지
• 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다.
• 발행/구독 모델 기반
• 작은 크기

    import create from 'zustand';
    
    // set 함수를 통해서만 상태를 변경할 수 있다
    const useStore = create(set => ({
      bears: 0,
      increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
      removeAllBears: () => set({ bears: 0 })
    }));

    // 상태를 꺼낸다
    function BearCounter() {
      const bears = useStore(state => state.bears);
      return <h1>{bears} around here ...</h1>;
    }
    
    // 상태를 변경하는 액션을 꺼낸다
    function Controls() {
      const increasePopulation = useStore(state => state.increasePopulation);
      return <button onClick={increasePopulation}>one up</button>;
    }

[React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil)](https://kir93.tistory.com/entry/React-%EC%B0%A8%EC%84%B8%EB%8C%80-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-Zustandredux-toolkit-vs-JotaiRecoil)