React useContext 완벽 가이드

React에서 useContext를 사용하면 컴포넌트 트리에 깊이 중첩된 컴포넌트에서도 prop drilling 없이 상태를 공유할 수 있습니다. 이 글에서는 useContext의 개념, 사용 방법, 장단점, 그리고 실전 예제를 함께 알아보겠습니다.

1. useContext란?

useContext는 React의 내장 Hook 중 하나로, Context API를 통해 데이터를 손쉽게 공유할 수 있도록 도와줍니다. 일반적으로 전역 상태 관리가 필요한 경우에 사용됩니다.

2. 왜 useContext를 사용할까?

React에서는 부모에서 자식으로 props를 통해 데이터를 전달하는 방식이 기본입니다. 하지만 컴포넌트 트리가 깊어질수록 여러 단계의 props 전달이 필요해지는데, 이를 "prop drilling" 문제라고 합니다.

useContext를 사용하면 이런 문제를 해결하고, 상태를 한 곳에서 관리하면서 필요한 컴포넌트에서 쉽게 접근할 수 있습니다.

3. useContext의 장단점

✅ 장점

• prop drilling 방지: 중간 컴포넌트를 거치지 않고 데이터를 쉽게 가져올 수 있습니다.
• 간결한 코드: 불필요한 props 전달을 줄여 코드가 단순해집니다.
• 상태 공유 용이: Redux, Recoil 같은 상태 관리 라이브러리 없이도 전역 상태를 쉽게 관리할 수 있습니다.

❌ 단점

• 리렌더링 성능 이슈: Context 값이 변경되면 해당 Context를 사용하는 모든 컴포넌트가 리렌더링됩니다.
• 세분화된 상태 관리 부족: 여러 개의 상태를 세분화해서 관리하려면 Context를 나눠야 합니다.

4. useContext 사용 방법

4.1. Context 생성 및 제공 (Provider 설정)

import React, { createContext, useContext, useState } from "react";

// 1. Context 생성
const ThemeContext = createContext();

// 2. Provider 컴포넌트 생성
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  // 테마 변경 함수
  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

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

export { ThemeProvider, ThemeContext };

4.2. useContext를 이용한 값 사용

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

const ThemeButton = () => {
  // 3. useContext로 값 가져오기
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={toggleTheme}
      style={{
        backgroundColor: theme === "light" ? "white" : "black",
        color: theme === "light" ? "black" : "white",
        padding: "10px 20px",
        border: "none",
        cursor: "pointer",
      }}
    >
      현재 테마: {theme} (클릭하여 변경)
    </button>
  );
};

export default ThemeButton;

4.3. 최상위 컴포넌트에서 Provider 감싸기

import React from "react";
import { ThemeProvider } from "./ThemeContext";
import ThemeButton from "./ThemeButton";

const App = () => {
  return (
    <ThemeProvider>
      <div>
        <h1>useContext 예제</h1>
        <ThemeButton />
      </div>
    </ThemeProvider>
  );
};

export default App;

5. 결론

useContext는 간단한 전역 상태 관리를 위한 강력한 도구입니다. Redux나 Recoil 같은 라이브러리를 사용하지 않아도 전역 데이터를 쉽게 공유할 수 있으며, prop drilling 문제를 해결하는 데 매우 유용합니다.

하지만 모든 상태를 Context로 관리하면 불필요한 리렌더링 문제가 발생할 수 있으므로, 필요한 경우 useReducer와 함께 사용하거나, 더 복잡한 상태 관리가 필요하면 Redux 같은 라이브러리를 고려하는 것이 좋습니다.

이제 useContext를 활용하여 상태 관리의 효율성을 높여보세요! 🚀