React 디버깅 실전

// ❌ 에러 1: key 경고
// Warning: Each child in a list should have
// a unique "key" prop.

// 원인: map으로 리스트 렌더링 시 key 누락
{items.map((item) => (
  <li>{item.name}</li>  // ❌ key 없음
))}

// ✅ 해결
{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

// ❌ 에러 2: useEffect 무한 루프
// 화면이 멈추거나 API를 수백 번 호출

function Component() {
  const [data, setData] = useState(null);

  // ❌ 의존성 배열 없음 → 매 렌더마다 실행 → 무한 루프
  useEffect(() => {
    fetch("/api/data")
      .then((r) => r.json())
      .then(setData);  // setData → 리렌더 → useEffect → ...
  });

  // ✅ 해결 — 빈 배열 추가 (마운트 시 1번만 실행)
  useEffect(() => {
    fetch("/api/data")
      .then((r) => r.json())
      .then(setData);
  }, []);  // ← 이것!
}

// ❌ 에러 3: state 직접 수정 — 화면이 안 바뀜
function TodoList() {
  const [todos, setTodos] = useState(["공부", "운동"]);

  // ❌ push는 원본을 수정 → React가 변경 감지 못함
  const addBad = () => {
    todos.push("독서");   // 원본 수정
    setTodos(todos);       // 같은 참조 → 리렌더 안됨
  };

  // ✅ 스프레드로 새 배열 생성
  const addGood = () => {
    setTodos([...todos, "독서"]);  // 새 배열 → 리렌더!
  };
}

// 실전 디버깅 예시 — "목록에 추가가 안돼요"

// 1. 문제: 추가 버튼 클릭 → 화면 변화 없음

// 2. 재현: 텍스트 입력 → 추가 버튼 클릭 → 목록 그대로

// 3. 원인 추정: console.log로 확인
const addTodo = () => {
  console.log("1. 함수 호출됨");          // ✅ 출력됨
  console.log("2. input 값:", text);       // ✅ 값 있음
  todos.push({ text });                     // 🔴 원본 수정!
  console.log("3. todos:", todos);          // ✅ 추가됨 (but...)
  setTodos(todos);                          // 🔴 같은 참조!
};

// 4. 수정: 스프레드로 새 배열 생성
const addTodoFixed = () => {
  setTodos([...todos, { text }]);           // ✅ 새 배열!
};

// 5. 검증: 추가 버튼 클릭 → 목록에 표시됨 ✅