reducer·Context·데이터 요청

// 액션 타입 상수 정의
export const ADD_ITEM = 'ADD_ITEM';
export const REMOVE_ITEM = 'REMOVE_ITEM';
export const UPDATE_QUANTITY = 'UPDATE_QUANTITY';
export const RESTORE_CART = 'RESTORE_CART';

// 초기 장바구니 상태
export const initialCartState = [];

// 리듀서 함수
export const cartReducer = (state, action) => {
  switch (action.type) {
    case ADD_ITEM: {
      const existingItem = state.find(item => item.id === action.payload.item.id);
      if (existingItem) {
        // 이미 있는 상품이면 수량만 증가
        return state.map(item =>
          item.id === action.payload.item.id
            ? { ...item, quantity: item.quantity + action.payload.quantity }
            : item
        );
      } else {
        // 새 상품이면 목록에 추가
        return [
          ...state,
          { ...action.payload.item, quantity: action.payload.quantity }
        ];
      }
    }

    case REMOVE_ITEM:
      return state.filter(item => item.id !== action.payload.id);
    case UPDATE_QUANTITY:
      return state.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: action.payload.quantity }
          : item
      ).filter(item => item.quantity > 0); // 수량이 0이하가 되면 제거

    case RESTORE_CART:
      return Array.isArray(action.payload.items)
        ? action.payload.items
        : state;

    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
};

import React, { createContext, useEffect, useReducer, useState } from 'react';
import {
  cartReducer,
  initialCartState,
  RESTORE_CART,
} from '../reducers/cartReducer';

// 1. Context 객체 생성
export const CartContext = createContext(null);

// 2. Provider 컴포넌트 생성
export const CartProvider = ({ children }) => {
  const [cartState, dispatch] = useReducer(cartReducer, initialCartState);
  const [storageReady, setStorageReady] = useState(false);

  // 브라우저 저장소 복원은 외부 시스템 동기화이므로 Effect에서 수행
  useEffect(() => {
    try {
      const savedCart = localStorage.getItem('shoppingCart');
      const parsedCart = savedCart ? JSON.parse(savedCart) : initialCartState;

      dispatch({
        type: RESTORE_CART,
        payload: { items: Array.isArray(parsedCart) ? parsedCart : initialCartState },
      });
    } catch (error) {
      console.error('Failed to restore cart from localStorage', error);
    } finally {
      setStorageReady(true);
    }
  }, []);

  // 복원이 끝날 때까지 쓰기를 건너뛰어 초기 빈 배열로 기존 값을 덮지 않음
  useEffect(() => {
    if (!storageReady) return;

    try {
      localStorage.setItem('shoppingCart', JSON.stringify(cartState));
    } catch (error) {
      console.error('Failed to persist cart to localStorage', error);
    }
  }, [cartState, storageReady]);

  // Context Provider를 통해 상태와 dispatch 함수 제공
  return (
    <CartContext.Provider value={{ cartState, dispatch }}>
      {children}
    </CartContext.Provider>
  );
};

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false;
    const abortController = new AbortController();

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      setData(null);

      try {
        const response = await fetch(url, { signal: abortController.signal });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const json = await response.json();
        if (!ignore) {
          setData(json);
        }
      } catch (error) {
        if (!ignore && error.name !== 'AbortError') {
          setError(error);
        }
      } finally {
        if (!ignore) {
          setLoading(false);
        }
      }
    };

    fetchData();

    // 이전 Effect는 네트워크 작업과 늦은 상태 반영을 모두 중단
    return () => {
      ignore = true;
      abortController.abort();
    };
  }, [url]);

  return { data, loading, error };
}

export default useFetch;