🌐
EPISODE 03
props drilling · createContext · Provider · 커스텀 훅
useContext
props drilling 문제, createContext/Provider/useContext 3단계, Context를 안전하게 감싸는 커스텀 훅, Context 적합·부적합 상황, 그리고 다크모드 패턴을 익힙니다.
ReactContextProvider
소요 시간
⏱ 45분
난이도
📊 중급
선수 조건
🎯 react-02
결과물
전역 테마(다크 모드) 컨텍스트 구현
이 강의에서 배우는 것
- 1props drilling이 왜 문제인지 설명한다
- 2createContext → Provider → useContext 3단계를 작성한다
- 3useContext를 커스텀 훅으로 감싼다
- 4Context 적합·부적합 상황을 판단한다
- 5전역 테마 토글 패턴을 구현한다
1. props drilling 문제
text
App (user 데이터)
└─ Page
└─ Section
└─ Header
└─ UserAvatar ← 여기서 user 사용중간 컴포넌트들이 user를 사용하지 않지만 계속 받아 넘겨야 합니다.
2. createContext / useContext
jsx
import { createContext, useContext, useState } from 'react';
// 1. Context 생성
const UserContext = createContext(null);
// 2. Provider — value로 데이터 제공
function App() {
const [user, setUser] = useState({ name: '김철수' });
return (
<UserContext.Provider value={user}>
<Page />
</UserContext.Provider>
);
}
// 3. Consumer — useContext로 어디서든 접근
function UserAvatar() {
const user = useContext(UserContext);
return <img alt={user.name} />;
}3. 커스텀 훅으로 감싸기
jsx
function useUser() {
const context = useContext(UserContext);
if (!context) throw new Error('useUser는 UserProvider 안에서');
return context;
}
function UserAvatar() {
const user = useUser();
return <img alt={user.name} />;
}더 명시적이고 Provider 누락을 즉시 감지.
4. Context 언제 쓸까?
| 적합 | 부적합 |
|---|---|
| 테마 (다크/라이트) | 자주 변경되는 데이터 |
| 로그인 사용자 정보 | 특정 컴포넌트만 쓰는 지역 상태 |
| 언어/지역 설정 | 성능이 중요한 데이터 |
| 전역 알림/토스트 |
⚠️
Context 값이 바뀌면 구독하는 모든 컴포넌트가 리렌더링. 자주 바뀌는 데이터는 Zustand 같은 상태 관리 라이브러리.
5. 전역 테마 패턴
jsx
const ThemeContext = createContext('light');
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => setTheme(prev => prev === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
function useTheme() {
return useContext(ThemeContext);
}