[Next.js 14 강의] 17강 - Context API를 통한 전역 상태 관리

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 React의 Context API를 사용하여 전역 상태를 관리하는 방법을 학습합니다. Context API는 Redux 같은 외부 상태 관리 라이브러리를 사용하지 않고도 전역 상태를 간단하게 관리할 수 있도록 도와줍니다. 초보자들도 이해할 수 있도록 기본 개념부터 실습 예제까지 단계별로 설명합니다.

 

 

1. Context API란 무엇인가?

 

Context API 소개

· Context API는 React에서 전역 상태를 관리하기 위한 내장 도구입니다. 컴포넌트 트리 전반에 걸쳐 데이터를 전달할 수 있으며, props drilling(여러 중간 컴포넌트를 통해 props를 전달하는 방식)을 피할 수 있습니다.

반응형

Context의 주요 요소

· Context 생성 (createContext): 전역 상태를 생성하기 위한 Context를 만듭니다.
· Provider (Context.Provider): 자식 컴포넌트에게 전역 상태를 제공하는 컴포넌트입니다.
· Consumer (useContext): 전역 상태를 소비하는 컴포넌트입니다.

 

 

2. Context API 사용법

 

1단계: Context 생성

createContext 함수를 사용하여 Context를 생성합니다.

import { createContext } from 'react';

// 초기 값은 null 또는 원하는 기본 상태로 설정
const ThemeContext = createContext(null);

 

2단계: Provider 설정

생성한 Context의 Provider를 사용하여 상태를 제공할 수 있습니다. Provider는 Context를 사용할 컴포넌트들을 감싸고, value prop을 통해 전역 상태를 전달합니다.

728x90

import { useState, createContext } from 'react';

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

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

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

export { ThemeContext, ThemeProvider };

 

 

3단계: Consumer 사용

useContext 훅을 사용하여 Context의 값을 사용할 수 있습니다. 이 훅은 Provider에서 제공한 상태값에 접근할 수 있게 해줍니다.

import { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);

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

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>현재 테마: {theme}</p>
      <button onClick={toggleTheme}>테마 변경</button>
    </div>
  );
}

 

4단계: Provider로 컴포넌트 감싸기

최상위 컴포넌트에서 Context Provider로 하위 컴포넌트를 감싸야 Context를 사용할 수 있습니다.

import { ThemeProvider } from './ThemeProvider';
import ThemedComponent from './ThemedComponent';

function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;

 

 

 

3. Context API의 실습: 테마 변경 기능 구현

 

실습 목표

Context API를 사용하여 테마 변경 기능을 구현합니다. 테마는 light와 dark 두 가지로 설정하고, 버튼 클릭 시 테마가 변경되도록 합니다.

 

단계별 실습 가이드

SMALL

① Context 생성 및 Provider 구현: ThemeContext를 만들고, ThemeProvider에서 useState를 사용하여 테마 상태를 관리합니다.
② Consumer 구현: useContext를 사용하여 현재 테마와 테마 변경 함수를 가져옵니다.
③ 테마 적용: 가져온 테마를 스타일에 적용하여 UI를 변경합니다.
④ Provider로 감싸기: 최상위 컴포넌트에서 ThemeProvider로 감싸서 하위 컴포넌트들이 Context에 접근할 수 있도록 합니다.

 

 

4. Context API의 장단점

 

장점

· 간단한 전역 상태 관리: Redux와 같은 복잡한 설정 없이 전역 상태를 관리할 수 있습니다.
· 명확한 데이터 흐름: Provider에서 명시적으로 값을 제공하기 때문에 데이터 흐름이 명확합니다.
· Props drilling 방지: 깊은 트리 구조에서 props를 단계별로 전달할 필요가 없어집니다.

단점

· 성능 이슈: 모든 하위 컴포넌트가 재렌더링되므로, 큰 규모의 상태 변화가 빈번할 경우 성능 이슈가 발생할 수 있습니다.
· 복잡한 구조의 상태 관리 한계: 매우 복잡한 전역 상태 관리에는 적합하지 않을 수 있습니다. 이 경우 Redux 또는 다른 상태 관리 라이브러리를 고려해야 합니다.

 

 

5. 실전 팁

복잡한 상태 관리에는 신중하게 사용하기
간단한 전역 상태에는 적합하지만, 복잡한 비동기 로직이나 많은 상태를 다루어야 한다면 Context API만으로는 한계가 있습니다.

 

Provider 분리하기

여러 개의 Context가 필요할 경우 Provider를 분리하여 필요한 컴포넌트만 해당 Context에 접근할 수 있도록 하는 것이 좋습니다.

 

이번 강의에서는 Context API를 사용하여 전역 상태를 관리하는 방법을 학습했습니다. 기본 개념과 사용법을 이해하고, 실습을 통해 Context API의 장단점을 경험해보았습니다. 앞으로는 이 도구를 활용하여 복잡한 전역 상태 관리 문제를 간단하게 해결할 수 있을 것입니다.

 

 

 

 

 

- 이전 수업 목록