React로 글로벌 상태 관리 구현

const { createContext, useContext, useReducer } = React;
  const Store = createContext();

  const reducer = (state, action) => {
    switch(action.type) {
      case 'ADD': return { ...state, units: [...state.units, action.payload] };
      case 'REMOVE': return { ...state, units: state.units.filter(u => u !== action.payload) };
      default: return state;
    }
  };

  function UnitDisplay() {
    const { state, dispatch } = useContext(Store);
    return (
      <div>
        {state.units.map(u => (
          <div key={u} style={{display:'flex', justifyContent:'space-between', color:'#10b981', marginBottom:'4px', fontSize:'12px'}}>
            {u}
            <button onClick={() => dispatch({type:'REMOVE', payload:u})} style={{background:'none', border:'none', color:'#555', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>✕</button>
          </div>
        ))}
      </div>
    );
  }

  function AddUnit() {
    const { dispatch } = useContext(Store);
    const units = ['T-600','T-800','T-1000','T-X'];
    return (
      <div style={{display:'flex', gap:'4px', flexWrap:'wrap', marginTop:'8px'}}>
        {units.map(u => <button key={u} onClick={() => dispatch({type:'ADD', payload:u})} style={{background:'#1a1a1a', color:'#888', border:'1px solid #333', padding:'4px 8px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>{u}</button>)}
      </div>
    );
  }

  function App() {
    const [state, dispatch] = useReducer(reducer, { units: ['T-800'] });
    return (
      <Store.Provider value={{ state, dispatch }}>
        <UnitDisplay />
        <AddUnit />
      </Store.Provider>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);