React의 &#useContext&# 및 &#useReducer&#에 대한 튜토리얼 가이드: 전역 상태를 효율적으로 관리-JS 튜토리얼-php.cn

React의 &#useContext&# 및 &#useReducer&#에 대한 튜토리얼 가이드: 전역 상태를 효율적으로 관리

Patricia Arquette

풀어 주다： 2024-11-11 11:16:02

원래의

539명이 탐색했습니다.

Tutorial Guide to

React의 useContext 및 useReducer에 대한 종합 가이드: 효율적인 전역 상태 관리

소개

React에서 상태 관리는 동적 및 대화형 애플리케이션을 구축하는 데 매우 중요합니다. useState와 useReducer는 로컬 구성 요소 상태를 처리하는 데 적합하지만 여러 구성 요소에서 전역 상태를 관리해야 하는 경우 어떻게 되나요? useContext 및 useReducer를 입력하세요. 두 개의 후크를 함께 사용하면 전역 수준에서 상태 관리를 효율적으로 처리할 수 있습니다.

이 기사에서는 useContext와 useReducer를 결합하여 React 앱을 위한 강력한 상태 관리 시스템을 만드는 방법을 살펴보겠습니다. 두 후크의 기본 사항을 다룬 다음 간단한 애플리케이션을 구축하여 글로벌 상태 관리를 위해 함께 사용할 수 있는 방법을 안내합니다.

이 가이드를 마치면 다음 내용을 확실하게 이해하게 될 것입니다.

useContext: 구성 요소 전체에서 상태를 공유하는 후크
useReducer: 복잡한 상태 로직을 관리하기 위한 후크
useContext와 useReducer 결합: 확장 가능한 전역 상태 솔루션을 위해 두 후크를 함께 사용하는 방법

시작해 보세요!

useContext 이해

useContext란 무엇입니까?

useContext는 모든 수준에서 수동으로 props를 전달할 필요 없이 구성 요소 트리 전체에서 상태(또는 다른 값)를 공유할 수 있게 해주는 React 후크입니다. 한 번에 여러 구성 요소에 전역 데이터를 제공해야 할 때 유용합니다.

useContext의 구문은 다음과 같습니다.

const value = useContext(MyContext);

로그인 후 복사

여기서 MyContext는 React.createContext()에 의해 생성된 컨텍스트 객체입니다.

언제 useContext를 사용하나요?

전체 상태 또는 구성 설정(예: 테마, 인증)을 공유합니다.
많은 수준의 중첩된 구성 요소를 통해 소품을 전달할 때 번거로워집니다.

useReducer 이해

useReducer 란 무엇입니까?

useReducer는 복잡한 로직이 포함된 상태를 관리하거나 상태가 이전 상태에 종속되는 경우에 사용되는 React 후크입니다. 상태 업데이트가 작업을 기반으로 해야 하고 여러 유형의 상태 변경이 있는 경우 useState의 대안으로 자주 사용됩니다.

useReducer의 구문은 다음과 같습니다.

const value = useContext(MyContext);

로그인 후 복사

reducer: 현재 상태와 액션을 기반으로 새로운 상태를 반환하는 함수
initialState: 리듀서의 초기 상태
dispatch: 상태를 업데이트하기 위해 리듀서에 작업을 보내는 데 사용되는 함수

useContext와 useReducer 결합

useContext와 useReducer를 결합하면 상태 전환 논리를 중앙 집중화하면서 애플리케이션 전체에서 복잡한 상태를 공유할 수 있습니다. 이는 앱의 모든 구성 요소에서 액세스해야 하는 전역 상태를 관리할 때 특히 유용합니다.

왜 결합해야 할까요?

중앙 집중형 상태: useContext는 상태에 대한 전역 범위를 제공하고 useReducer는 복잡한 상태 변경을 관리하는 구조화된 방법을 제공합니다.
예측 가능한 업데이트: useReducer를 사용하면 액션과 리듀서로 상태 전환을 예측 가능하게 관리할 수 있으며, useContext는 모든 구성 요소에서 상태를 사용할 수 있도록 보장합니다.
확장성: 이 조합을 사용하면 여러 구성 요소에서 상태를 관리해야 하는 애플리케이션을 더 쉽게 확장할 수 있습니다.

예제 프로젝트: 글로벌 할 일 목록

useContext 및 useReducer를 사용하여 전역 상태를 관리하는 간단한 할 일 목록 애플리케이션을 만들어 보겠습니다. 앱은 작업 추가, 전환 및 제거를 지원합니다.

1단계: 컨텍스트 및 리듀서 생성

전역 상태를 유지하는 컨텍스트와 작업을 관리하는 리듀서를 만드는 것부터 시작하겠습니다.

const [state, dispatch] = useReducer(reducer, initialState);

로그인 후 복사

설명

todoReducer: 작업 추가, 전환, 제거 등 할 일 목록 상태를 관리합니다.
TodoContext: 할 일 목록 상태에 대한 전역 컨텍스트를 제공합니다.
TodoProvider: 모든 하위 항목에 컨텍스트와 useReducer 후크를 제공하는 래퍼 구성 요소입니다.

2단계: 할 일 목록 구성 요소 만들기

이제 할 일 목록을 표시하고 작업을 추가, 제거, 전환하는 기능을 제공하는 컴포넌트를 만들어 보겠습니다.

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

// Initial State
const initialState = [];

// Reducer Function
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE':
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'REMOVE':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
}

// Create Context
const TodoContext = createContext();

// Provide Context to App
export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

로그인 후 복사