Context API 3가지 사용 패턴

React 공식 문서에서 권장하는 useContext

import React, { createContext, useContext, useState } from 'react';
 
const UserContext = createContext(null);
 
const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });
  
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};
 
const useUser = () => {
  return useContext(UserContext);
};
 
const UserProfile = () => {
  const user = useUser();
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
};
 
const App = () => (
  <UserProvider>
    <UserProfile />
  </UserProvider>
);
 
export default App;

🚧 React 공식 문서에서 권장되지 않는 Consumer

import React, { createContext, useState } from 'react';
 
const UserContext = createContext();
 
const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });
 
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};
 
const UserProfile = () => (
  <UserContext.Consumer>
    {(user) => (
      <div>
        <h1>{user.name}</h1>
        <p>Age: {user.age}</p>
      </div>
    )}
  </UserContext.Consumer>
);
 
const App = () => (
  <UserProvider>
    <UserProfile />
  </UserProvider>
);
 
export default App;

함수형 children에게 직접 전달

import React, { createContext, useState } from 'react';
 
const UserContext = createContext();
 
const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });
 
  return (
    <UserContext.Provider value={user}>
      {typeof children === 'function' ? children(user) : children}
    </UserContext.Provider>
  );
};
 
const UserProfile = () => (
  <UserProvider>
    {(user) => (
      <div>
        <h1>{user.name}</h1>
        <p>Age: {user.age}</p>
      </div>
    )}
  </UserProvider>
);
 
const App = () => (
  <div>
    <UserProfile />
  </div>
);
 
export default App;

You Might Not Need Redux useSyncExternalStore