🔑 배열 인덱스를 React 리스트 `key`로 사용하기: 예측 불가능한 UI와 성능 저하

Why Wrong?

How to Fix?

import React, { useState } from 'react';

function BadKeyExample() {
  const [todos, setTodos] = useState([
    { id: 1, text: '아침 식사' },
    { id: 2, text: '코드 리뷰' },
    { id: 3, text: '점심 식사' },
  ]);

  const removeTodo = (indexToRemove) => {
    setTodos(todos.filter((_, index) => index !== indexToRemove));
  };

  const addTodo = () => {
    const newTodo = { id: Date.now(), text: `새로운 할 일 ${todos.length + 1}` };
    setTodos([newTodo, ...todos]); // 맨 앞에 새 할 일 추가
  };

  return (
    <div>
      <h3>❌ 배열 인덱스를 key로 사용</h3>
      <button onClick={addTodo}>맨 앞에 할 일 추가</button>
      <ul style={{ border: '1px solid red', padding: '10px' }}>
        {todos.map((todo, index) => (
          <li key={index} style={{ marginBottom: '5px' }}> {/* ⚠️ 문제의 원인: index를 key로 사용 */}
            <input type="text" value={todo.text} onChange={(e) => {
              const newTodos = [...todos];
              newTodos[index].text = e.target.value;
              setTodos(newTodos);
            }} />
            <button onClick={() => removeTodo(index)} style={{ marginLeft: '10px' }}>삭제</button>
          </li>
        ))}
      </ul>
      <p style={{ color: 'red', fontWeight: 'bold' }}>
        ⚠️ '맨 앞에 할 일 추가' 버튼을 누른 후, 기존 '아침 식사' 칸에 '테스트'라고 입력해보세요. 그리고 다시 '맨 앞에 할 일 추가'를 누르거나 중간의 '코드 리뷰'를 삭제하면 입력값이 엉키는 것을 볼 수 있습니다.
      </p>
    </div>
  );
}

export default BadKeyExample;

import React, { useState } from 'react';

function GoodKeyExample() {
  const [todos, setTodos] = useState([
    { id: 1, text: '아침 식사' },
    { id: 2, text: '코드 리뷰' },
    { id: 3, text: '점심 식사' },
  ]);

  const removeTodo = (idToRemove) => {
    setTodos(todos.filter(todo => todo.id !== idToRemove));
  };

  const addTodo = () => {
    const newTodo = { id: Date.now(), text: `새로운 할 일 ${todos.length + 1}` }; // 고유 ID 생성
    setTodos([newTodo, ...todos]); // 맨 앞에 새 할 일 추가
  };

  return (
    <div>
      <h3>✅ 고유한 ID를 key로 사용</h3>
      <button onClick={addTodo}>맨 앞에 할 일 추가</button>
      <ul style={{ border: '1px solid green', padding: '10px' }}>
        {todos.map((todo) => (
          <li key={todo.id} style={{ marginBottom: '5px' }}> {/* ✨ 해결: 고유한 todo.id를 key로 사용 */}
            <input type="text" value={todo.text} onChange={(e) => {
              const newTodos = todos.map(item => 
                item.id === todo.id ? { ...item, text: e.target.value } : item
              );
              setTodos(newTodos);
            }} />
            <button onClick={() => removeTodo(todo.id)} style={{ marginLeft: '10px' }}>삭제</button>
          </li>
        ))}
      </ul>
      <p style={{ color: 'green', fontWeight: 'bold' }}>
        ✨ '맨 앞에 할 일 추가' 버튼을 누른 후, 기존 '아침 식사' 칸에 '테스트'라고 입력해보세요. 다시 '맨 앞에 할 일 추가'를 누르거나 중간의 '코드 리뷰'를 삭제해도 입력값이 올바르게 유지됩니다.
      </p>
    </div>
  );
}

export default GoodKeyExample;

You Might Also Like