React 무료로 배울 수 있나요?

네, 코드마스터의 React 강의는 전부 무료입니다. 광고도 없습니다. 개념노트는 로그인 없이 열람할 수 있습니다.

React 초보자도 따라갈 수 있나요?

네. 모든 레슨이 개념 설명 → 코드 예시 → 인터랙티브 데모 → 확인 퀴즈 순서로 구성되어 있어 사전 지식 없이도 따라올 수 있습니다.

React 학습에 얼마나 걸리나요?

각 레슨은 평균 30~60분 분량입니다. 하루 1~2개 기준 약 1~2개월이면 카테고리 전체를 완주할 수 있습니다.

JavaScript

useContext

💡 왜 배워야 할까요?

🎯 로그인 정보, 테마 같은 전역 데이터를 간단하게 공유할 수 있습니다.

💼 Props를 5단계, 10단계 거쳐 전달하는 복잡함을 없앱니다.

⚡ Redux 같은 복잡한 상태관리 없이 중소 프로젝트를 빠르게 만듭니다.

🏢 실무에서는

실무에서는 사용자 정보, 다크모드 설정, 언어 선택 같은 앱 전체가 필요한 데이터를 useContext로 관리합니다. 새 직원이 입사하면 가장 먼저 배우는 패턴입니다.

useContext란?

useContext

Context API를 통해 컴포넌트 트리 전체에서 데이터를 공유하는 Hook입니다.

Props Drilling 문제

code

App → Layout → Sidebar → UserMenu → UserAvatar (5단계 전달)

Context를 사용하면 중간 컴포넌트를 거치지 않고 직접 접근 가능합니다.

React 19 변화

▸use(Context) Hook으로 더 간결하게 사용 가능
▸Provider 없이 Context 기본값 활용 가능

💻 useContext 실습

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

// 1. Context 생성
interface ThemeContextType {
  theme: "light" | "dark";
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | null>(null);

// 2. Provider 컴포넌트
function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("dark");
  const toggleTheme = () => setTheme(t => t === "light" ? "dark" : "light");

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

// 3. 커스텀 Hook (타입 안전)
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) throw new Error("useTheme must be used within ThemeProvider");
  return context;
}

// 4. 사용
function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme} className="p-2 rounded">
      {theme === "dark" ? "🌙" : "☀️"}
    </button>
  );
}

// 5. App에서 Provider 감싸기
function App() {
  return (
    <ThemeProvider>
      <Header />
      <Main />
    </ThemeProvider>
  );
}

// React 19: use() Hook
import { use } from "react";
function NewComponent() {
  const { theme } = use(ThemeContext)!; // React 19 새 문법
  return <div className={theme}>...</div>;
}

💡 💡 Context 팁

▸커스텀 Hook: useTheme(), useAuth() 등으로 래핑
▸분리: 자주 변하는 값과 안 변하는 값 Context 분리
▸대안: 복잡한 전역 상태는 Zustand가 더 편리
▸React 19: use(Context)로 조건부 읽기 가능

이 개념은 React 컴포넌트 개발에서 핵심적입니다. 리액트의 선언적 UI 패러다임을 이해하고, props와 state의 차이를 명확히 구분하세요. 컴포넌트는 입력(props)에 대해 항상 동일한 출력(JSX)을 반환하는 순수 함수처럼 동작해야 합니다.

⚛️ React 패턴 — useContext

useContext을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.

1 📦 1. Context 생성

전역으로 공유할 데이터 저장소

const ThemeContext = createContext('light');

↓

2 🎁 2. Provider로 감싸기

값을 제공할 트리 범위 지정

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

↓

3 📥 3. useContext로 소비

어느 깊이의 자식이든 직접 접근

const theme = useContext(ThemeContext);

↓

4 💡 4. 언제 쓰나

테마·로그인 사용자·언어 설정 등 진짜 전역 상태에만

🌍 useContext — 전역 상태

코드를 직접 수정하면 0.7초 후 자동 반영됩니다. React 18 + Babel로 브라우저에서 즉시 실행.

🖥️ 실행 결과 — 렌더링된 React 컴포넌트

✏️ React 코드 수정하기 (클릭해서 열기)

const ThemeContext = React.createContext('light');

function Toolbar() {
  return <ThemedButton />;
}

function App() {
  const [theme, setTheme] = React.useState('dark');
  return (
    <div style={{padding:20}}>
      <ThemeContext.Provider value={theme}>
        <h2>useContext 데모</h2>
        <Toolbar />
        <p style={{marginTop:20}}>App → Toolbar → ThemedButton (3단계 깊이)</p>
        <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} style={{marginTop:10}}>
          🔄 테마 전환
        </button>
      </ThemeContext.Provider>
    </div>
  );
}

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

⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

useContext의 단점은?