React에서 Context API를 사용하여 전역 및 지속 상태 관리-JS 튜토리얼-php.cn

React에서 Context API를 사용하여 전역 및 지속 상태 관리

Barbara Streisand

풀어 주다： 2024-12-02 10:46:15

원래의

917명이 탐색했습니다.

Managing Global and Persistent State with Context API in React

전역 상태 관리는 많은 애플리케이션에서 필수적인 기능입니다. 일반적으로 사용자 로그인 데이터 처리 또는 앱 테마 제어와 같은 작업에 사용됩니다.
또한 일관된 사용자 경험을 보장하려면 페이지를 새로 고칠 때에도 상태를 유지하는 것이 중요합니다.
이 기사에서는 테마 제어의 실제 예와 함께 Context API를 사용하여 전역적이고 지속적인 상태 관리를 달성하는 간단한 접근 방식을 보여 드리겠습니다.

로드맵

1단계: ThemeContext.tsx 생성

이 파일에서는 테마 관련 상태를 전역적으로 관리하기 위해 ThemeContext를 생성합니다. 또한 구성 요소의 컨텍스트에 대한 액세스를 단순화하기 위해 사용자 정의 후크인 useThemeContext를 정의합니다.

import { createContext, useContext } from "react";

// Define context type
interface ThemeContextType {
  isDarkMode: boolean;
  toggleTheme: () => void;
}

// Create context
export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Create custom hook to access
export const useThemeContext = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

로그인 후 복사

2단계: ThemeProvider.tsx 생성

ThemeProvider 구성 요소는 하위 항목에 ThemeContext를 제공하고 테마 상태 변경을 처리합니다.

import React, { useState } from "react";
import { ThemeContext } from "./ThemeContext";

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => {
    const newTheme = !isDarkMode ? "dark" : "light";
    // Change state value
    setIsDarkMode(!isDarkMode);
    // Save value to local storage
    // Toggle "dark" class in html element
    localStorage.setItem("theme", newTheme);
    document.documentElement.classList.toggle("dark", !isDarkMode);
  };

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

로그인 후 복사

3단계: ThemeProvider에서 앱 래핑

마지막으로 앱 구성 요소를 main.tsx의 ThemeProvider로 래핑하여 애플리케이션 전체에서 컨텍스트 사용을 활성화합니다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { ThemeProvider } from './context/ThemeProvider.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
)

로그인 후 복사

4단계: 구성 요소의 컨텍스트 값에 액세스

컨텍스트가 설정되면 이제 구성 요소의 테마 값과 토글 기능에 액세스할 수 있습니다.

import { useThemeContext } from '@/context/ThemeContext';

function App() {
  const { isDarkMode, toggleTheme } = useThemeContext();

  return (
    <div>
      <p>isdarkMode: {isDarkMode}</p>
      <button onclick={toggleTheme}>Toggle Theme</button>
    </div>
  )
}

export default App

로그인 후 복사