9.React Context API 완벽 가이드: 전역 상태 관리의 기본

"React Context API 완벽 가이드: 전역 상태 관리의 기본"

---

1시간 분량 강의안 (Context API 기초)

강의 목표

1. React Context API의 개념과 필요성을 이해한다.
2. Context API를 사용하여 전역 상태를 관리하는 방법을 학습한다.
3. 실습을 통해 Context API로 동적인 UI를 구현한다.

---

강의 목차

---

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

Context API의 정의

• Context API는 React의 내장 API로, 컴포넌트 계층 구조를 통해 전역 상태를 공유할 수 있습니다.
• Props Drilling(부모-자식 간 Props 전달의 복잡성)을 해결하기 위한 도구입니다.

Context API의 주요 구성 요소

1. React.createContext: Context를 생성.
2. Provider: Context 값을 제공하는 컴포넌트.
3. Consumer: Context 값을 소비하는 컴포넌트.

Context API의 동작 방식

1. Provider에서 값을 정의.
2. 하위 컴포넌트 어디에서든 값을 접근 및 소비.

---

2. Context API를 사용하는 방법 (20분)

1단계: Context 생성

• React.createContext를 사용하여 Context를 생성합니다.

import React from 'react';

const UserContext = React.createContext();
export default UserContext;

2단계: Provider로 값 전달

• UserContext.Provider를 사용하여 데이터를 전달합니다.

import React from 'react';
import UserContext from './UserContext';
import Profile from './Profile';

function App() {
  return (
    <UserContext.Provider value={{ name: 'React', age: 10 }}>
      <Profile />
    </UserContext.Provider>
  );
}

export default App;

3단계: Consumer로 값 소비

• 하위 컴포넌트에서 UserContext.Consumer로 값을 소비합니다.

 

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

function Profile() {
  return (
    <UserContext.Consumer>
      {(value) => (
        <div>
          <h1>Name: {value.name}</h1>
          <p>Age: {value.age}</p>
        </div>
      )}
    </UserContext.Consumer>
  );
}

export default Profile;

---

3. Context API와 Hook의 결합 (20분)

useContext Hook 사용

• useContext Hook을 사용하면 더 간단하게 Context 값을 사용할 수 있습니다.

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

function Profile() {
  const user = useContext(UserContext);

  return (
    <div>
      <h1>Name: {user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default Profile;

다중 Context 관리

• 여러 Context를 결합하여 관리할 수 있습니다.

import React, { createContext, useContext } from 'react';

const UserContext = createContext();
const ThemeContext = createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: 'React' }}>
      <ThemeContext.Provider value={{ color: 'blue' }}>
        <Profile />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);

  return (
    <div style={{ color: theme.color }}>
      <h1>Name: {user.name}</h1>
    </div>
  );
}

export default App;

---

4. 실습 과제 (10분)

실습 과제

1. 사용자 이름과 테마 색상을 Context API로 관리하고, 화면에 표시하세요.
2. 버튼을 클릭하여 테마 색상을 변경할 수 있도록 구현하세요.

예제

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

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

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

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default App;

---

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

• Q&A:
  1. Context API와 Redux의 차이점은 무엇인가요?
  2. Context API는 어떤 상황에서 사용하는 것이 적합한가요?
• 요약:
  • Context API는 전역 상태를 관리하는 간단한 방법으로, Props Drilling 문제를 해결합니다.
  • useContext Hook을 사용하면 더 간결하고 직관적으로 Context 값을 사용할 수 있습니다.
  • Context API는 간단한 전역 상태 관리에는 적합하지만, 복잡한 상태 관리에는 Redux와 같은 라이브러리가 유리합니다.