React 상태 관리 라이브러리 비교하기

import { Dispatch, PropsWithChildren, createContext, useContext, useState } from "react";
 
interface SettingContext {
    theme: [string | undefined, Dispatch<string | undefined>];
    locale: [string | undefined, Dispatch<string | undefined>];
}
 
const settingContext = createContext<SettingContext>( {} as SettingContext );
 
export function SettingProvider( props: PropsWithChildren )
{
    const theme = useState<string | undefined>( "dark" );
    const locale = useState<string | undefined>( "kr" );
 
    return <settingContext.Provider
        value={{
            theme,
            locale,
        }}
    >
        {props.children}
    </settingContext.Provider>;
}
 
export function useSettingContext( )
{
    const context = useContext( settingContext );
 
    return {
        context,
    };
}

import React from 'react';
import { SettingProvider } from './setting.Context';
 
const App: React.FC = () => {
  return (
    <SettingProvider>
      <div className="app">
        <h1>React Context API 예시</h1>
        <ThemeSelector />
        <LocaleSelector />
      </div>
    </SettingProvider>
  );
};
 
export default App;

import React from 'react';
import { useSettingContext } from './setting.Context';
 
export default fucntion ThemeSelector()
{
  const { theme } = useSettingContext();
 
  return (
    <div>
      <span>테마</span>
      <Select option={ThemeOption} value={theme} />
    </div>
  );
};

import React from "react";
import ReactDOM from "react-dom";
import { RecoilRoot } from "recoil";
import App from "./App";
 
ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById("root")
);

import { atom } from "recoil";
 
export const counterState = atom({
  key: "counterState",
  default: 0,
});

import React from "react";
import { useRecoilState } from "recoil";
import { counterState } from "./atoms";
 
export default function Counter() {
  const [count, setCount] = useRecoilState(counterState);
 
  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };
 
  const handleDecrement = () => {
    setCount((prevCount) => prevCount - 1);
  };
 
  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={handleIncrement}>증가</button>
      <button onClick={handleDecrement}>감소</button>
    </div>
  );
};

import { atom } from 'recoil';
import { User } from './types';
 
interface User {
  name: string;
  age: number;
}
 
export const userAtom = atom<User>({
  key: 'userAtom',
  default: { 
    name: '',
    age: 0
  },
});

import { atom, selector } from 'recoil';
 
const number1State = atom({
  key: 'number1State',
  default: 0,
});
 
const number2State = atom({
  key: 'number2State',
  default: 0,
});
 
const sumSelector = selector({
  key: 'sumSelector',
  get: ({ get }) => {
    const number1 = get(number1State);
    const number2 = get(number2State);
    return number1 + number2;
  },
});

import {atom, selector, useRecoilState, DefaultValue} from 'recoil';
 
const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});
 
const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) =>
    set(
      tempFahrenheit,
      newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32,
    ),
});
 
function TempCelcius() {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  const [tempC, setTempC] = useRecoilState(tempCelcius);
  const resetTemp = useResetRecoilState(tempCelcius); // default 값으로 리셋합니다.
 
  const addTenCelcius = () => setTempC(tempC + 10);
  const addTenFahrenheit = () => setTempF(tempF + 10);
  const reset = () => resetTemp();
 
  return (
    <div>
      Temp (Celcius): {tempC}
      <br />
      Temp (Fahrenheit): {tempF}
      <br />
      <button onClick={addTenCelcius}>Add 10 Celcius</button>
      <br />
      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
      <br />
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
 
export const increment = () => ({
  type: INCREMENT,
});
 
export const decrement = () => ({
  type: DECREMENT,
});

import { INCREMENT, DECREMENT } from "./actions";
 
const initialState = {
  count: 0,
};
 
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};
 
export default counterReducer;

import { createStore } from "redux";
import counterReducer from "./reducers";
 
const store = createStore(counterReducer);
 
export default store;

import React from "react";
import { Provider } from "react-redux";
import store from "./store";
import Counter from "./Counter";
 
const App = () => {
  return (
    <Provider store={store}>
      <div className="app">
        <h1>Redux 카운터 앱</h1>
        <Counter />
      </div>
    </Provider>
  );
};
 
export default App;

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./actions";
 
const Counter = () =>
{
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
 
  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={() => dispatch(increment())}>증가</button>
      <button onClick={() => dispatch(decrement())}>감소</button>
    </div>
  );
};
 
export default Counter;

// Store 생성
interface SidebarStore {
  visible: boolean;
  toggle: () => void;
  close: () => void;
}
 
export const useSidebarStore = create<SidebarStore>((set) => ({
  visible: false,
  toggle: () => set((state) => ({ visible: !state.visible })),
  close: () => set({ visible: false }),
}));
 
// React Component에서 사용
export default function Sheet( props: PropsWithChildren ) {
  const {visible, toggle} = useSidebarStore();
    
  return (
    <>
      <Sheet open={visible} onOpenChange={toggle}>
        <SheetTrigger>
          button
        </SheetTrigger>
        <SheetContent>
          <Sidebar />
        </SheetContent>
      </Sheet>
    </>
  );
}

// store 전체를 구독하게 되어 모든 경우에 리렌더링이 발생
const { nuts } = useBearStore()
 
// nuts만 구독하게 되어 nuts가 변경될 때만 리렌더링이 발생
const nuts = useBearStore((state) => state.nuts)
 
// 하나의 객체로 복수개의 state를 가져오려면
import { useShallow } from 'zustand/react/shallow'
 
// Object Pick
const { nuts, honey } = useBearStore(
  useShallow((state) => ({ nuts: state.nuts, honey: state.honey })),
)
 
// Array pick
const [nuts, honey] = useBearStore(
  useShallow((state) => [state.nuts, state.honey]),
)
 
// Mapped picks
const treats = useBearStore(useShallow((state) => Object.keys(state.treats)))

const useFishStore = create((set) => ({
  salmon: 1,
  tuna: 2,
  deleteEverything: () => set({}, true), // clears the entire store, actions included
  deleteTuna: () => set((state) => omit(state, ['tuna']), true),
}))

interface BearState {
  bears: number
  increase: (by: number) => void
}
 
const useBearStore = create<BearState>()(
  devtools(
    persist(
      (set) => ({
        bears: 0,
        increase: (by) => set((state) => ({ bears: state.bears + by })),
      }),
      { name: 'bearStore' },
    ),
  ),
)
 
// 좀더 클린코드로 작성하려면
const myMiddlewares = (f) => devtools(persist(f, { name: 'bearStore' }))
 
interface BearState {
  bears: number
  increase: (by: number) => void
}
 
const useBearStore = create<BearState>()(
  myMiddlewares((set) => ({
    bears: 0,
    increase: (by) => set((state) => ({ bears: state.bears + by })),
  })),
)