17.React Context API로 상태 관리하기: Props Drilling 없이 데이터 공유

"React Context API로 상태 관리하기: Props Drilling 없이 데이터 공유"

---

1시간 분량 강의안 (Context API 상태 관리)

강의 목표

1. React Context API를 상태 관리 목적으로 사용하는 방법을 이해한다.
2. Props Drilling 문제를 해결하는 Context API의 기본 개념을 학습한다.
3. Context API를 사용하여 전역 상태 관리와 컴포넌트 간 데이터 공유를 구현한다.

---

강의 목차

---

1. Context API란 무엇인가? (10분)

Context API의 정의

• React Context API는 컴포넌트 계층 구조를 통해 데이터를 전달할 때 Props Drilling 문제를 해결하기 위한 전역 상태 관리 도구입니다.

Context API의 주요 구성 요소

1. Context: 전역 상태를 관리하는 객체를 생성.
2. Provider: 데이터를 하위 컴포넌트에 전달.
3. Consumer: 데이터를 소비하는 컴포넌트.

Context API의 동작 방식

• Provider에서 데이터를 제공하고, 하위 컴포넌트에서 Consumer 또는 useContext Hook으로 데이터를 소비.

Context API의 장점

• Props Drilling 없이 컴포넌트 간 데이터를 공유.
• React의 내장 기능으로 추가 설치 불필요.

---

2. Context API를 사용한 상태 관리 설정 (15분)

1단계: Context 생성

• Context를 생성하여 데이터 관리.

import { createContext } from 'react';

const CounterContext = createContext();
export default CounterContext;

2단계: Provider로 상태 관리

• Provider 컴포넌트를 사용해 상태와 업데이트 함수를 공유.

import React, { useState } from 'react';
import CounterContext from './CounterContext';

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return (
    <CounterContext.Provider value={{ count, increment, decrement }}>
      {children}
    </CounterContext.Provider>
  );
}

export default CounterProvider;

3단계: Provider로 감싸기

• 최상위 컴포넌트를 Provider로 감싸 데이터 공유.

import React from 'react';
import CounterProvider from './CounterProvider';
import App from './App';

function Root() {
  return (
    <CounterProvider>
      <App />
    </CounterProvider>
  );
}

export default Root;

---

3. Context 데이터 소비하기 (15분)

1단계: useContext Hook 사용

• useContext로 데이터를 직접 소비.

import React, { useContext } from 'react';
import CounterContext from './CounterContext';

function Counter() {
  const { count, increment, decrement } = useContext(CounterContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2단계: Consumer 사용

• Consumer를 사용하여 데이터 소비(구식 방식).

import React from 'react';
import CounterContext from './CounterContext';

function Counter() {
  return (
    <CounterContext.Consumer>
      {({ count, increment, decrement }) => (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
          <button onClick={decrement}>Decrement</button>
        </div>
      )}
    </CounterContext.Consumer>
  );
}

export default Counter;

---

4. Context API로 상태 관리 구현 (15분)

1단계: 다중 Context 관리

• 여러 Context를 조합하여 사용.

const ThemeContext = createContext();
const CounterContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      <CounterContext.Provider value={{ count: 10 }}>
        <ChildComponent />
      </CounterContext.Provider>
    </ThemeContext.Provider>
  );
}

2단계: 중첩된 Context 소비

• 여러 Context를 동시에 소비.

function ChildComponent() {
  const { theme } = useContext(ThemeContext);
  const { count } = useContext(CounterContext);

  return (
    <div style={{ color: theme === 'dark' ? 'white' : 'black' }}>
      Count: {count}
    </div>
  );
}

---

5. 실습 과제 (10분)

실습 과제

1. Context API를 사용하여 사용자 이름과 나이를 관리하고 화면에 표시하세요.
2. 테마(Context)를 추가하여 배경색을 변경할 수 있는 버튼을 구현하세요.

예제

function ThemeToggler() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      현재 테마: {theme === 'dark' ? '다크' : '라이트'}
    </button>
  );
}

---

6. Q&A 및 정리 (10분)

• Q&A:
  1. Context API와 Redux의 차이점은 무엇인가요?
  2. Context API는 어떤 규모의 애플리케이션에 적합한가요?
• 요약:
  • Context API는 Props Drilling 문제를 해결하며, 간단한 전역 상태 관리에 유용합니다.
  • Provider로 상태를 제공하고, useContext로 데이터를 소비합니다.
  • Redux와 달리 복잡한 상태 관리는 적합하지 않을 수 있습니다.