React에서 useContext 및 useReducer를 사용한 상태 관리: 글로벌 쇼핑 카트 구축-JS 튜토리얼-php.cn

State Management with useContext and useReducer in React: Building a Global Shopping Cart

React에서 useContext 및 useReducer를 사용한 고급 상태 관리: 글로벌 쇼핑 카트 구축

이전 기사에서는 React 애플리케이션에서 전역 상태를 효과적으로 관리하기 위해 useContext와 useReducer를 결합하는 개념을 소개했습니다. 우리는 간단한 할 일 목록을 작성하여 이를 시연했습니다. 이제 한 단계 더 발전하여 이러한 개념을 보다 복잡하고 실제적인 예인 글로벌 장바구니에 적용해 보겠습니다.

이 가이드에서는 애플리케이션의 확장성과 성능을 유지하면서 항목 추가, 업데이트, 제거, 합계 계산 등 여러 상태와 작업을 관리하는 방법을 다룹니다.

두 번째 부분에서는 다음 내용을 배우게 됩니다.

useReducer를 사용하여 더 복잡한 상태를 처리하세요.
유연한 컨텍스트 공급자를 만들어 상태와 작업을 전역적으로 관리하세요.
고급 감속기 기능을 구현하여 계산을 수행하고 다양한 유형의 작업을 처리합니다.
구성요소 성능을 최적화하여 더 나은 성능을 위한 메모 기능을 제공합니다.

들어가자!

프로젝트 개요: 글로벌 쇼핑 카트

장바구니 애플리케이션에는 다음이 포함됩니다.

상품 목록: 장바구니에 추가할 수 있는 상품 세트
장바구니 기능: 사용자는 장바구니에 항목을 추가, 업데이트, 제거할 수 있습니다.
장바구니 총계: 총 품목과 총 가격을 계산하여 표시합니다.

먼저 컨텍스트와 리듀서를 설정한 다음 구성요소를 구축하여 기능을 보여드리겠습니다.

설정 및 초기 파일

시작하려면 React 프로젝트를 초기화하고 기본 폴더 구조를 설정하세요.

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

로그인 후 복사

1단계: 초기 상태 및 리듀서 생성

빈 장바구니와 샘플 제품 세트를 나타내는 초기 상태부터 시작하겠습니다.

초기 상태:

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

로그인 후 복사

리듀서 기능:

항목 추가, 항목 수량 업데이트, 항목 제거, 합계 계산 등 다양한 작업을 처리하는 cartReducer 함수를 설정하겠습니다.

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

로그인 후 복사

설명

ADD_TO_CART: 장바구니에 항목을 추가하고 이미 있는 경우 수량을 늘립니다.
REMOVE_FROM_CART: ID를 기준으로 항목을 제거합니다.
UPDATE_QUANTITY: 장바구니에 있는 항목의 수량을 업데이트합니다.
CALCULATE_TOTALS: 총 항목 수와 장바구니 총 가격을 계산합니다.

2단계: 컨텍스트 및 공급자 만들기

이제 상태 및 디스패치 기능을 전역적으로 전달하기 위한 컨텍스트와 공급자를 생성하겠습니다. 이렇게 하면 모든 구성요소가 장바구니 상태 및 작업에 액세스할 수 있습니다.

CartContext.js

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

로그인 후 복사

3단계: 구성요소 구축

공급자 및 컨텍스트 설정을 통해 이제 제품 목록 및 장바구니에 대한 구성 요소를 생성할 수 있습니다.

ProductList 구성 요소

ProductList 구성 요소는 사용 가능한 제품 목록을 표시하고 사용자가 장바구니에 제품을 추가할 수 있도록 합니다.

ProductList.js

function cartReducer(state, action) {
  switch (action.type) {
    case "ADD_TO_CART": {
      const item = state.cart.find(item => item.id === action.payload.id);
      const updatedCart = item
        ? state.cart.map(cartItem =>
            cartItem.id === item.id
              ? { ...cartItem, quantity: cartItem.quantity + 1 }
              : cartItem
          )
        : [...state.cart, { ...action.payload, quantity: 1 }];

      return { ...state, cart: updatedCart };
    }

    case "REMOVE_FROM_CART": {
      const updatedCart = state.cart.filter(item => item.id !== action.payload);
      return { ...state, cart: updatedCart };
    }

    case "UPDATE_QUANTITY": {
      const updatedCart = state.cart.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: action.payload.quantity }
          : item
      );
      return { ...state, cart: updatedCart };
    }

    case "CALCULATE_TOTALS": {
      const { totalItems, totalPrice } = state.cart.reduce(
        (totals, item) => {
          totals.totalItems += item.quantity;
          totals.totalPrice += item.price * item.quantity;
          return totals;
        },
        { totalItems: 0, totalPrice: 0 }
      );
      return { ...state, totalItems, totalPrice };
    }

    default:
      return state;
  }
}

로그인 후 복사

카트 구성 요소

장바구니 구성요소는 장바구니에 있는 품목을 표시하고, 수량을 업데이트하고, 품목을 제거하고, 총 품목과 가격을 표시합니다.

Cart.js

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

export const CartContext = createContext();

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

로그인 후 복사

설명

handleRemove: 장바구니에서 항목을 제거합니다.
handleUpdateQuantity: 선택한 항목의 수량을 업데이트합니다.
총 품목 및 가격: 장바구니 구성요소는 해당 주에서 계산된 값을 기준으로 전체 품목과 가격을 표시합니다.

4단계: 공급자로 앱 래핑

모든 구성 요소가 장바구니 상태에 액세스할 수 있도록 하려면 CartProvider에서 전체 앱을 래핑하세요.

App.js

import React, { useContext } from 'react';
import { CartContext } from './CartContext';

function ProductList() {
  const { state, dispatch } = useContext(CartContext);

  const handleAddToCart = (product) => {
    dispatch({ type: "ADD_TO_CART", payload: product });
    dispatch({ type: "CALCULATE_TOTALS" });
  };

  return (
    <div>
      <h2>Products</h2>
      <ul>
        {state.products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
            <button onClick={() => handleAddToCart(product)}>Add to Cart</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

로그인 후 복사