•
문제: 상태 업데이트 로직에 부수효과가 섞임
•
해결: Reducer를 순수 계산으로 작성
// ❌ Before: 부수효과가 있는 상태 관리
function ShoppingCart() {
const [cart, setCart] = useState([])
const addItem = (item) => {
// 상태 업데이트에 부수효과가 섞임
console.log('Adding item:', item) // 액션!
localStorage.setItem('lastAdded', item.id) // 액션!
setCart(current => {
const existing = current.find(i => i.id === item.id)
if (existing) {
return current.map(i =>
i.id === item.id
? { ...i, quantity: i.quantity + 1 }
: i
)
}
return [...current, { ...item, quantity: 1 }]
})
}
}
JavaScript
복사
// ✅ After
function ShoppingCart() {
const [cart, dispatch] = useReducer(cartReducer)
const addItem = (item) {
console.log('Adding item:', item) // 액션!
localStorage.setItem('lastAdded', item.id) // 액션!
dispatch({ type: "ADD", item })
}
}
const cartReducer = (state, payload) => {
switch (payload.type) {
case "ADD":
const existing = state.find(item => item.id === payload.item.id)
if (existing) {
return state.map(item => item.id === payload.item.id ? { ...item, quantity: item.quantity + 1 : item })
}
return [...state, { ...payload.item, quantity: 1 }]
default:
return state
}
}
TypeScript
복사