React 상태의 불변 업데이트: Undo가 이전 값으로 돌아가게 하려면

import { useState } from 'react'
 
const initialCart = {
  items: [
    { id: 'coffee', name: '커피', quantity: 1 },
    { id: 'tea', name: '차', quantity: 1 },
  ],
}
 
export default function CartHistory() {
  const [history, setHistory] = useState([initialCart])
  const current = history[history.length - 1]
 
  function handleIncrease(itemId) {
    const next = { ...current }
    const target = next.items.find(item => item.id === itemId)
    if (!target) return
 
    target.quantity += 1
    setHistory([...history, next])
  }
 
  function handleUndo() {
    if (history.length > 1) {
      setHistory(history.slice(0, -1))
    }
  }
 
  return (
    <section>
      <p>
        {current.items
          .map(item => `${item.name}: ${item.quantity}`)
          .join(', ')}
      </p>
      <button type="button" onClick={() => handleIncrease('coffee')}>
        커피 수량 추가
      </button>
      <button
        type="button"
        onClick={handleUndo}
        disabled={history.length <= 1}
      >
        실행 취소
      </button>
    </section>
  )
}

next !== current                         // true
next.items === current.items             // true
next.items[0] === current.items[0]       // true

function handleIncrease(itemId) {
  const next = {
    ...current,
    items: current.items.map(item => {
      if (item.id !== itemId) return item
 
      return {
        ...item,
        quantity: item.quantity + 1,
      }
    }),
  }
 
  setHistory([...history, next])
}

quantity 숫자
  ↑ 새 coffee 항목 객체
  ↑ 새 items 배열
  ↑ 새 cart 객체
  ↑ 새 history 배열

next !== current                         // true
next.items !== current.items             // true
next.items[0] !== current.items[0]       // true: coffee 변경
next.items[1] === current.items[1]       // true: tea 재사용

문제       수량 추가 화면은 2지만 Undo 뒤에도 2임
잘못된 판단 최상위 cart 객체만 새로 만들면 중첩 항목도 독립됨
관찰       next !== current지만 next.items[0] === current.items[0]
원인       새 바깥 객체 안에서 과거와 같은 배열·항목을 직접 변경
행동       변경 항목, items 배열, cart와 history까지 경로를 새로 만듦
검증       현재 수량 2, Undo 수량 1, 변경하지 않은 항목 동일성 유지