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

useContext 

리액트 앱을 만들다 보면 컴포넌트 간 상태를 공유해야 하는 경우가 많습니다. 예를 들어, 로그인 여부, 테마 설정, 다크모드, 언어 설정 등은 여러 컴포넌트가 함께 사용하는 전역 상태입니다.

이럴 때 React의 Context API + useContext 훅을 사용하면 아주 깔끔하게 상태를 관리할 수 있습니다.

 

---

1.  useContext란?

useContext는 Context 객체의 값을 쉽게 꺼내 쓰기 위한 React 훅입니다.

Context는 React에서 전역 상태를 만들 수 있도록 도와주는 기능이고, useContext는 이 Context에 저장된 값을 컴포넌트 내부에서 간단히 꺼내 쓰게 해주는 도구입니다.

언제 useContext를 쓰는가?

1. 로그인 여부 관리 : isAuthenticated, userInfo, logout() 등
2. 다크모드 설정 : 앱 전체에 적용되는 테마 상태
3. 언어 설정 : i18n과 연계해 다국어 처리
4. 사용자 권한에 따른 접근 제어 : role, permissions

 

---

2.  기본 사용법

a.  Context 생성

import { createContext } from "react";

const ThemeContext = createContext();

b.  Provider로 감싸기

import { useState } from "react";

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

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

c.  useContext로 사용하기

import { useContext } from "react";

const ThemeSwitcher = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      현재 테마: {theme}
    </button>
  );
};

 

---

3.  Redux 대신 useContext?

많은 초보자들은 글로벌 상태 공유에 Redux를 먼저 떠올리지만, 사실 간단한 앱에서는 Context + useContext 조합이면 충분합니다.

항목	Context + useContext	Redux
학습 난이도	쉬움	비교적 높음
셋업 비용	낮음	높음
상태 규모	작음~중간	중간~크게
도구	React만 있으면 됨	Redux Toolkit 등 별도 설치 필요

 

---

4.  커스텀 훅과 함께 쓰기

useContext는 보통 커스텀 훅으로 감싸서 재사용합니다.

// context/UserContext.js
export const UserContext = createContext();

export const useUser = () => useContext(UserContext);

사용 시

const { user, logout } = useUser();

 

---

5. 마무리

• useContext는 React에서 전역 상태를 가져오는 가장 간단한 방법입니다.
• createContext와 함께 사용하면 컴포넌트 간 데이터 공유가 쉬워집니다.
• 로그인 상태, 테마, 사용자 정보 등 공통 데이터 처리에 적합합니다.
• 복잡한 상태 관리 도구(Redux 등) 없이도, 작고 명확한 전역 상태를 다룰 수 있습니다.
• 특히 커스텀 훅과 함께 사용하면 코드의 재사용성과 가독성이 더욱 좋아집니다.

함께 보면 좋은 자료

블로그 글 :

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

[React Custom Hooks] 로직을 재사용하는 가장 React스러운 방법

[Redux] React 상태 관리를 위한 예측 가능한 컨테이너

 

---