React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(10)

Context API를 이용한 전역 상태 관리

이번 강의에서는 React Context API를 사용하여 전역 상태 관리를 구현하는 방법을 배웁니다. Context API는 컴포넌트 트리 내에서 props 전달 없이 데이터를 공유할 수 있도록 도와주는 기능으로, 상태 관리를 쉽게 할 수 있습니다.

Context API를 이용한 전역 상태 관리

---

1. Context API 기본 개념

Context API는 컴포넌트 간의 데이터를 전역적으로 관리하고, 중첩된 컴포넌트로 props를 일일이 전달하지 않고도 데이터를 공유할 수 있게 해줍니다. Context를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 직접적으로 데이터를 전달하지 않고, 필요한 컴포넌트에서만 데이터를 구독할 수 있습니다.

1.1 Context API 기본 사용법

Context API를 사용하는 기본적인 흐름은 다음과 같습니다:

1. Context 생성
2. Context Provider로 상태값을 전달
3. Consumer 또는 useContext로 데이터 사용

---

2. Context API 사용 예시

이제 Context API를 사용해 전역 상태를 관리하는 예제를 살펴보겠습니다. 예시로 ThemeContext를 만들어, 전체 애플리케이션에서 테마를 전역 상태로 관리합니다.

2.1 Context 생성

먼저, ThemeContext를 생성합니다.

// ThemeContext.js
import React, { createContext, useState } from 'react';

// Context 생성
export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  // 테마 변경 함수
  const toggleTheme = () => {
    setIsDarkTheme(prevTheme => !prevTheme);
  };

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

2.2 Provider로 데이터 전달

ThemeProvider는 전역 상태를 관리하고, 모든 자식 컴포넌트에서 테마 상태를 접근할 수 있게 합니다. 이제 이 ThemeProvider를 애플리케이션의 루트 컴포넌트에 적용합니다.

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemeToggle from './ThemeToggle';
import PageContent from './PageContent';

function App() {
  return (
    <ThemeProvider>
      <div>
        <ThemeToggle />
        <PageContent />
      </div>
    </ThemeProvider>
  );
}

export default App;

2.3 전역 상태를 사용하는 Consumer 컴포넌트

이제 테마를 변경하는 버튼과 테마에 따라 다른 스타일을 적용하는 컴포넌트를 만들어봅니다. useContext를 사용하여 ThemeContext의 값을 가져올 수 있습니다.

// ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemeToggle() {
  const { isDarkTheme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      {isDarkTheme ? 'Switch to Light Theme' : 'Switch to Dark Theme'}
    </button>
  );
}

export default ThemeToggle;

// PageContent.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function PageContent() {
  const { isDarkTheme } = useContext(ThemeContext);

  const themeStyle = {
    backgroundColor: isDarkTheme ? '#333' : '#FFF',
    color: isDarkTheme ? '#FFF' : '#000',
    padding: '20px',
    textAlign: 'center'
  };

  return (
    <div style={themeStyle}>
      <h1>{isDarkTheme ? 'Dark Theme' : 'Light Theme'}</h1>
      <p>This is a page with theme context applied!</p>
    </div>
  );
}

export default PageContent;

2.4 코드 설명

• ThemeContext: 전역 상태를 저장하는 컨텍스트입니다.
• ThemeProvider: 전역 상태를 관리하고, 모든 자식 컴포넌트에 상태와 상태 변경 함수를 전달합니다.
• useContext: 각 자식 컴포넌트는 useContext를 통해 Context의 상태값을 읽고, 필요한 기능을 사용할 수 있습니다.
• ThemeToggle: 전역 상태 값을 읽어와 테마를 변경할 수 있는 버튼을 렌더링합니다.
• PageContent: 테마에 따라 페이지 스타일이 변경됩니다.

---

3. Context API의 장점

Context API를 사용하면 다음과 같은 장점이 있습니다:

1. props 드릴링 방지: 중첩된 컴포넌트에 props를 직접 전달할 필요 없이, 필요한 컴포넌트에서 직접 전역 상태를 구독할 수 있습니다.
2. 전역 상태 관리: 테마, 사용자 로그인 상태, 언어 설정 등과 같은 전역적으로 필요한 데이터를 관리하기에 적합합니다.
3. 유연한 데이터 공유: 필요에 따라 어떤 컴포넌트에서도 쉽게 데이터를 접근할 수 있습니다.

---

4. 프로젝트 구조

Context API를 사용한 기본 프로젝트 구조는 다음과 같습니다:

my-app/
│
├── src/
│   ├── ThemeContext.js
│   ├── ThemeToggle.js
│   ├── PageContent.js
│   ├── App.js
│   └── index.js

---

결론

이번 강의에서는 Context API를 사용해 전역 상태 관리를 구현하는 방법을 배웠습니다. Context API는 컴포넌트 트리 전체에서 데이터를 쉽게 전달할 수 있도록 해주며, props 전달 없이 데이터에 접근할 수 있는 강력한 도구입니다. props 드릴링 문제를 해결하고, 애플리케이션 내에서 전역 상태를 유연하게 관리할 수 있습니다.