React 전역 상태 관리 유틸 - context wrapper

AppStateProvider.tsx

/**
 * Context 를 사용한 전역 상태 관리 유틸
 *
 * 주의: 상태 변경 시 AppStateProvider 하위의 모든 컴포넌트가 리렌더링 됨
 *
 * 사용법:
 *
 * <AppStateProvider>
 *   <App />
 * </AppStateProvider>
 *
 *
 * export default function Component() {
 *   const [lang, setLang] = useAppState('lang', 'en');
 *   return (
 *     <>
 *       <p>{lang}</p>
 *       <button onClick={() => setLang(() => 'ko')}>KO</button>
 *       <button onClick={() => setLang(() => 'en')}>EN</button>
 *     </>
 *   );
 * }
 *
 */

import React, { createContext, useContext, useState, useCallback } from "react";

const appContext = createContext({
  state: {},
  setState: (s: any) => {}
});

interface AppStateProviderProps {
  children: React.ReactNode;
  initialState?: any;
}

export default function AppStateProvider(props: AppStateProviderProps) {
  const [appState, setAppState] = useState(props.initialState ?? {});

  return (
    <appContext.Provider
      value={{
        state: appState,
        setState: (update: any) => setAppState(update)
      }}
    >
      {props.children}
    </appContext.Provider>
  );
}

export function useAppState(keyName: string, defaultValue: any = undefined) {
  const { state, setState } = useContext(appContext);

  // @ts-ignore
  const _state = state[keyName] ?? defaultValue;
  const _setState = (f: (s: any) => any) =>
    setState({ ...state, [keyName]: f(_state) });

  return [_state, _setState];
}

export function useAppStateValue(
  keyName: string,
  defaultValue: any = undefined
) {
  const { state } = useContext(appContext);

  // @ts-ignore
  return state[keyName] || defaultValue;
}