2026.03.30

[React 기초] Context + useState 상태 관리

Context API와 useState를 함께 사용하여 전역 상태를 관리하는 방법을 정리합니다.

context

react

react기초

usecontext

usestate

Context + useState 상태 관리 📦

Context API는
데이터를 전역으로 공유할 수 있습니다.

하지만 Context만 사용하면
값을 변경할 수 없습니다.

그래서 보통
useState와 함께 사용합니다.

👉 Context + useState
이 조합이 가장 많이 사용됩니다.

오늘 배울 내용 🎯

✔ Context + useState 구조
✔ 상태 변경 방법
✔ Provider 구조
✔ 실무 패턴

주요 포인트 Top3

# 전역 상태 관리 📦

여러 컴포넌트에서 상태 공유

# 상태 변경 가능 ⚡

useState로 상태 변경

# 실무 패턴 🚀

로그인 상태 관리

01. Context만 사용하면 발생하는 문제 🤔

Context만 사용하면
값을 변경할 수 없습니다.

예

jsx

<UserContext.Provider value="홍길동">

이렇게 하면
값이 고정됩니다.

👉 값 변경 불가능

그래서 useState를 함께 사용합니다.

02. Context + useState 기본 구조 🧩

구조는 다음과 같습니다.

code

Context 생성
↓
Provider 생성
↓
useState 추가
↓
값 전달

03. Context 생성하기 ⚙️

jsx

import { createContext } from "react";
 
export const UserContext = createContext();

04. Provider 만들기 📦

jsx

import { useState } from "react";
import { UserContext } from "./UserContext";
 
function UserProvider({ children }) {
  const [user, setUser] = useState(null);
 
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}
 
export default UserProvider;

👉 Provider 생성 완료

05. Provider 적용하기 🧩

jsx

import UserProvider from "./UserProvider";
 
function App() {
  return (
    <UserProvider>
      <Header />
    </UserProvider>
  );
}

06. useContext 사용하기 ⚡

jsx

import { useContext } from "react";
import { UserContext } from "./UserContext";
 
function Header() {
  const { user, setUser } = useContext(UserContext);
 
  return (
    <div>
      {user}
      <button onClick={() => setUser("홍길동")}>
        로그인
      </button>
    </div>
  );
}

07. 전체 흐름 🔄

Context 생성

jsx

createContext()

Provider 생성

jsx

useState()

Provider 적용

jsx

<UserProvider>

useContext 사용

jsx

useContext()

08. 실제 사용 예제 🔥

jsx

import { createContext, useContext, useState } from "react";
 
const UserContext = createContext();
 
function UserProvider({ children }) {
  const [user, setUser] = useState(null);
 
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}
 
function Header() {
  const { user, setUser } = useContext(UserContext);
 
  return (
    <div>
      {user}
      <button onClick={() => setUser("홍길동")}>
        로그인
      </button>
    </div>
  );
}
 
function App() {
  return (
    <UserProvider>
      <Header />
    </UserProvider>
  );
}
 
export default App;

09. 언제 사용하면 좋을까 📌

다음과 같은 경우 사용합니다.

code

로그인 상태
유저 정보
테마
설정

👉 여러 컴포넌트에서 사용하는 데이터

GOYO.’s Tip 💡

Context API는
useState와 함께 사용하는 것이 일반적입니다.

가장 많이 사용하는 예는
로그인 상태 관리입니다.

그리고 Context는
전역 상태 관리의 기본 방법입니다.

마무리 🎯

이번 글에서는
Context + useState 상태 관리를 알아봤습니다.

✔ Context 생성
✔ Provider 생성
✔ useState 연결
✔ useContext 사용

이제 React에서
전역 상태 관리를 할 수 있습니다.

목록으로 가기

이전 클래스[React 기초] Context API 상태 관리