🔄 무분별한 전역 상태(Global State) 사용: 예측 불가능한 상태 변화와 성능 병목, 🪢 복잡한 의존성

Why Wrong?

How to Fix?

// 전역 변수를 이용한 상태 관리 (예시, 실제로는 더 복잡한 로직이 있을 수 있음)
let theme = 'light';

function toggleTheme() {
  theme = theme === 'light' ? 'dark' : 'light';
  // 강제로 모든 컴포넌트 리렌더링 (매우 비효율적)
  forceUpdateAllComponents(); 
}

function MyComponent() {
  return (
    <div>
      Current theme: {theme}
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

// React Context를 이용한 상태 관리
import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function useTheme() {
  return useContext(ThemeContext);
}

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div>
      Current theme: {theme}
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

// App.js
function App() {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
}

You Might Also Like