useContext 해부: 전역 상태 시스템

핵심 개념

useContext는 컴포넌트 트리 전체에 데이터를 전달하는 방법입니다. props drilling 없이 깊은 컴포넌트에 데이터를 전달할 수 있습니다. createContext로 컨텍스트를 생성하고 Provider로 값을 공급합니다. Context를 지우며 전역 데이터가 어떻게 차단되는지 확인하십시오.

코드 분석

REACT📋 코드 (31줄)







const { createContext, useContext, useState } = React;
  const MissionContext = createContext(null);

  function StatusDisplay() {
    const mission = useContext(MissionContext);
    return (
      <div style={{border:'1px solid #333', padding:'8px', marginBottom:'8px'}}>
        <div style={{color:'#10b981'}}>MISSION: {mission.name}</div>
        <div style={{color:'#888', fontSize:'12px'}}>STATUS: {mission.status}</div>
      </div>
    );
  }

  function App() {
    const [mission] = useState({ name: 'SKYNET INFILTRATION', status: 'ACTIVE' });
    return (
      <MissionContext.Provider value={mission}>
        <div style={{color:'#888', marginBottom:'8px', fontSize:'12px'}}>GLOBAL CONTEXT ACTIVE</div>
        <StatusDisplay />
        <StatusDisplay />
      </MissionContext.Provider>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React 'useContext' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'useContext'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React 'useContext' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React 'useContext' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

useContext 해부: 전역 상태 시스템은 이 3가지만 확실히 잡으세요

1.10단계 깊이로 props를 전달하면(prop drilling) 중간 컴포넌트가 자신과 무관한 데이터를 계속 넘겨야 합니다

2.createContext로 저장소를 만들고, Provider로 범위를 정하고, useContext로 어디서든 꺼내 씁니다

3.다음 챕터에서 불필요한 재계산을 방지하는 useMemo와 useCallback을 배웁니다

💬 이 챕터 질문 보기

REACT · CH.10 — 질문하거나 답변을 확인하세요

→

진행도 10 / 34

← 커리큘럼으로 ← 목록으로 (React)