[Day57] ⚛️ React useReducer로 복잡한 상태 로직 리팩토링

[github-actions]

useReducer로 복잡한 상태 로직 리팩토링

카테고리: ⚛️ React
난이도: 🟢 Easy
제한 시간: 15분

---

문제

쇼핑몰의 장바구니 기능을 구현하는 상황입니다. useReducer를 사용하여 장바구니 상태를 관리하고, 상품 추가, 삭제, 수량 변경 기능을 구현하세요.

코드

import React, { useReducer } from 'react';

const initialCartState = [];

// TODO: 여기에 구현하세요
function cartReducer(state, action) {
}

function ShoppingCart() {
  const [cart, dispatch] = useReducer(cartReducer, initialCartState);

  const addItem = (item) => {
    // TODO: 여기에 구현하세요
  };

  const removeItem = (id) => {
    // TODO: 여기에 구현하세요
  };

  const updateQuantity = (id, quantity) => {
    // TODO: 여기에 구현하세요
  };

  return (
    <div>
      <h2>장바구니</h2>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} - {item.quantity}개
            <button onClick={() => removeItem(item.id)}>삭제</button>
            <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
            <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>-</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ id: 1, name: '새 상품', quantity: 1 })}>상품 추가</button>
    </div>
  );
}

export default ShoppingCart;

요구사항

1. useReducer를 사용하여 장바구니 상태를 관리해야 합니다.
2. 상품을 장바구니에 추가하는 기능을 구현하세요.
3. 장바구니에서 상품을 삭제하는 기능을 구현하세요.
4. 장바구니에 있는 상품의 수량을 변경하는 기능을 구현하세요.

힌트

💡 힌트 보기

useReducer의 action 객체를 활용하여 상태를 업데이트하세요. action 객체는 type과 payload를 포함할 수 있습니다.

---

🤖 이 문제는 AI에 의해 자동 생성되었고, 생성 후 검수 단계를 거쳤습니다.
풀이는 PR로 제출해주세요! 정답은 다음 날 자정에 댓글로 공개됩니다.

[github-actions]

📝 레퍼런스 정답

import React, { useReducer } from 'react';

const initialCartState = [];

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      return state.filter(item => item.id !== action.payload);
    case 'UPDATE_QUANTITY':
      return state.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: action.payload.quantity }
          : item
      );
    default:
      return state;
  }
}

function ShoppingCart() {
  const [cart, dispatch] = useReducer(cartReducer, initialCartState);

  const addItem = (item) => {
    dispatch({ type: 'ADD_ITEM', payload: item });
  };

  const removeItem = (id) => {
    dispatch({ type: 'REMOVE_ITEM', payload: id });
  };

  const updateQuantity = (id, quantity) => {
    dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } });
  };

  return (
    <div>
      <h2>장바구니</h2>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} - {item.quantity}개
            <button onClick={() => removeItem(item.id)}>삭제</button>
            <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
            <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>-</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ id: 1, name: '새 상품', quantity: 1 })}>상품 추가</button>
    </div>
  );
}

export default ShoppingCart;

자신의 풀이와 비교해보세요! 다른 접근 방식도 정답일 수 있습니다.