🐛 불변성(Immutability) 무시한 상태 업데이트: 예측 불가능한 UI와 디버깅의 악몽

Why Wrong?

How to Fix?

import React, { useState } from 'react';

function BuggyList() {
  const [items, setItems] = useState([ { id: 1, text: '첫 번째 아이템', completed: false } ]);

  const handleAddItem = () => {
    // ❌ 직접 배열을 변경 (뮤테이션)
    items.push({ id: items.length + 1, text: `아이템 ${items.length + 1}`, completed: false });
    setItems(items); // React는 이 변경을 감지하지 못할 수 있음 (참조가 동일)
  };

  const handleToggleComplete = (id) => {
    // ❌ 직접 객체 속성을 변경 (뮤테이션)
    const itemToUpdate = items.find(item => item.id === id);
    if (itemToUpdate) {
      itemToUpdate.completed = !itemToUpdate.completed;
      setItems(items); // React는 이 변경을 감지하지 못할 수 있음 (참조가 동일)
    }
  };

  return (
    <div>
      <h2>버그가 있는 ToDo 리스트</h2>
      <button onClick={handleAddItem}>아이템 추가</button>
      <ul>
        {items.map(item => (
          <li key={item.id} style={{ textDecoration: item.completed ? 'line-through' : 'none' }}>
            {item.text}
            <input
              type="checkbox"
              checked={item.completed}
              onChange={() => handleToggleComplete(item.id)}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BuggyList;

import React, { useState } => {
  const [items, setItems] = useState([ { id: 1, text: '첫 번째 아이템', completed: false } ]);

  const handleAddItem = () => {
    // ✅ 스프레드 문법으로 새로운 배열 생성
    setItems(prevItems => [
      ...prevItems,
      { id: prevItems.length + 1, text: `아이템 ${prevItems.length + 1}`, completed: false }
    ]);
  };

  const handleToggleComplete = (id) => {
    // ✅ map을 사용하여 새로운 배열과 새로운 객체 생성
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, completed: !item.completed } : item
      )
    );
  };

  return (
    <div>
      <h2>불변성을 지킨 ToDo 리스트</h2>
      <button onClick={handleAddItem}>아이템 추가</button>
      <ul>
        {items.map(item => (
          <li key={item.id} style={{ textDecoration: item.completed ? 'line-through' : 'none' }}>
            {item.text}
            <input
              type="checkbox"
              checked={item.completed}
              onChange={() => handleToggleComplete(item.id)}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FixedList;

You Might Also Like