React Context API로 전역 상태 관리 구현

이전 글 

React Router로 SPA(Single Page Application) 구현하기

https://tiny-immj.tistory.com/86

React Router로 SPA(Single Page Application) 구현하기, SPA를 사용하는 이유

 

---

Context API로 전역 상태 관리

Context API는 컴포넌트 트리 내 props 전달 없이 데이터를 공유할 수 있도록 도와주는 기능으로

상태 관리를 쉽게 할 수 있다

 

1. 개념과 사용하는 목적 

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

 

 

2. Context API 사용법 3가지

1) Context 생성

2) Context Provider로 상태값 전달

3) Consumer 또는 useContext로 데이터 사용

 

 

3. 사용 예제 

node, react 프로젝트 생성

npx create-react-app context-api-app

 

세팅이나 프로젝트 생성에 대한 설명이 필요한 경우 아래 포스팅 참고해주세요

https://tiny-immj.tistory.com/78

React, node.js를 이용한 기초 프로젝트 생성(for mac)

 

 

3-1. Context 생성

> src에 ThemeContext.js 생성

ThemeContext.js

// 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>
  );
};

 

 

3-2. 데이터 전달(Provider)

> App.js 수정

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;

 

 

3-3. 전역상태를 사용하는 컴포넌트(Consumer)

테마를 변경하는 버튼과 테마에 따라 다른 스타일을 적용하는 컴포넌트를 만든다

useContext를 사용해 ThemeContext의 값을 가져올 수 있다

 

1) src에 ThemeToggle.js 생성

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;

 

 

2) src에 PageContent.js 생성

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;

 

 

3) 코드 분석

> ThemeContext : 전역 상태를 저장하는 컨텍스트

> ThemeProvider : 전역 상태를 관리하고 모든 자식 컴포넌트에 상태와 상태 변경 함수를 전달

> useContext : 각 자식 컴포넌트는 useContext를 통해 Context의 상태값을 읽고 필요한 기능을 사용할 수 있다

> ThemeToggle : 전역 상태 값을 읽어와 테마를 변경할 수 있는 버튼을 렌더링한다

> PageContent : 테마에 따라 페이지 스타일이 변경

 

 

4. Context API를 사용하면 좋은 이유 

1) props 드릴링 방지 

중첩된 컴포넌트에 props를 직접 전달할 필요없이, 필요한 컴포넌트에서 직접 전역 상태를 구독할 수 있다

2) 전역 상태 관리 

테마, 사용자 로그인 상태, 언어 설정 등과 같은 전역적으로 필요한 데이터를 관리하기에 적합하다

3) 유연한 데이터 공유 

필요에 따라 어떤 컴포넌트에서도 쉽게 데이터를 접근할 수 있다