🪢 불필요한 React Context Provider 래핑: 성능 저하와 디버깅 복잡성 증가

Why Wrong?

How to Fix?

// App.jsx
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';
import Profile from './Profile';

function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={{ user, setUser }}>
        <Profile />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

export default App;

// Profile.jsx
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function Profile() {
  const { theme } = useContext(ThemeContext);
  const { user } = useContext(UserContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000' }}>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default Profile;

// ThemeContext.js
import { createContext } from 'react';

const ThemeContext = createContext(null);

export default ThemeContext;

// UserContext.js
import { createContext } from 'react';

const UserContext = createContext(null);

export default UserContext;

// App.jsx
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import Profile from './Profile';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Profile user={{ name: 'John Doe', age: 30 }} />
    </ThemeContext.Provider>
  );
}

export default App;

// Profile.jsx
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function Profile({ user }) {
  const { theme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000' }}>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default Profile;

// ThemeContext.js
import { createContext } from 'react';

const ThemeContext = createContext(null);

export default ThemeContext;

You Might Also Like