[useContext] 전역 상태 공유를 간단하게 구현하는 방법

728x90

useContext 

React 애플리케이션에서 컴포넌트 간 데이터를 공유할 때 props drilling(깊게 전달되는 props)이 반복되면 유지보수가 어려워집니다. 이때 useContext 훅은 컴포넌트 트리 전체에 걸쳐 데이터를 쉽게 공유할 수 있는 강력한 도구가 됩니다. 이 글에서는 useContext에 대한 개념 설명은 생략하고, 실제로 프로젝트에서 어떻게 useContext를 사용하는지 A부터 Z까지 구현 중심으로 자세히 안내합니다.

 

---

1.  Context 생성하기 (Create Context)

먼저 context 객체를 생성합니다.

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

export const ThemeContext = createContext();

이때 createContext()의 인자로 기본값을 줄 수도 있습니다.

export const ThemeContext = createContext("light");

 

---

2.  Context Provider 만들기 (Wrap with Provider)

이제 데이터를 공급해줄 Provider 컴포넌트를 만들어야 합니다.

// ThemeProvider.js
import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

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

• value에 전달되는 객체가 실제로 자식 컴포넌트에서 받아 사용할 데이터입니다.

 

---

3.  최상단에 Provider로 감싸기 (Wrap App)

Context를 사용하려면 App 컴포넌트에서 Provider로 감싸야 합니다.

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeProvider';
import HomePage from './HomePage';

function App() {
  return (
    <ThemeProvider>
      <HomePage />
    </ThemeProvider>
  );
}

export default App;

 

---

4.  하위 컴포넌트에서 useContext로 데이터 사용하기 (Use Context)

드디어 이제 하위 컴포넌트에서 useContext를 사용합니다.

// HomePage.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const HomePage = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff" }}>
      <h1>현재 테마: {theme}</h1>
      <button onClick={toggleTheme}>테마 변경</button>
    </div>
  );
};

export default HomePage;

 

---

5.  복잡한 구조에서 Context 나누기 (Split Context)

하나의 Context에 너무 많은 상태를 넣으면 유지보수가 어려워지므로 Context는 목적별로 나누는 것이 좋습니다.

• ThemeContext
• AuthContext
• LocaleContext

 

---

6.  커스텀 Hook으로 Context 사용 깔끔하게 (Create Custom Hook)

useContext를 반복해서 쓰는 것이 번거롭다면 커스텀 훅으로 추출하면 더 깔끔하게 사용할 수 있습니다.

// useTheme.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

export const useTheme = () => useContext(ThemeContext);

사용할 때는 아래와 같이 사용할 수 있습니다.

const { theme, toggleTheme } = useTheme();

 

 

---

7.  마무리

1. createContext()로 Context를 생성하고,
2. Provider로 상태 값을 공급하며,
3. useContext()로 하위 컴포넌트에서 값을 사용합니다.
4. Custom Hook을 만들어 깔끔하게 추상화할 수도 있습니다.
5. Context는 목적별로 분리하고, 상태 공유가 필요한 범위만 감싸는 것이 성능과 유지보수 측면에서 좋습니다.

함께 보면 좋은 자료

외부 사이트 :

• React 공식 문서 - useContext

블로그 글 :

[React Hooks] useState부터 커스텀 훅까지

[useContext] 전역 상태를 쉽게 가져오고 싶다면?

 

---

반응형