React의 key prop은 왜 중요하며, index를 key로 사용하면 안 되는 이유는?

// key 없이 리스트 렌더링 (권장하지 않음)
function BadList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li>{item.name}</li> // Warning: Each child should have a unique "key" prop
      ))}
    </ul>
  );
}

// key를 올바르게 사용한 리스트
function GoodList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function TodoItem({ todo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState(todo.text);

  return (
    <li>
      {isEditing ? (
        <input value={editText} onChange={e => setEditText(e.target.value)} />
      ) : (
        <span>{todo.text}</span>
      )}
      <button onClick={() => setIsEditing(e => !e)}>편집</button>
    </li>
  );
}

function BadTodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '할일 1' },
    { id: 2, text: '할일 2' },
    { id: 3, text: '할일 3' },
  ]);

  const deleteFirst = () => {
    setTodos(prev => prev.slice(1)); // 첫 번째 항목 삭제
  };

  return (
    <ul>
      {todos.map((todo, index) => (
        // 문제: index를 key로 사용
        <TodoItem key={index} todo={todo} />
      ))}
    </ul>
  );
}

function GoodTodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '할일 1' },
    { id: 2, text: '할일 2' },
    { id: 3, text: '할일 3' },
  ]);

  const deleteFirst = () => {
    setTodos(prev => prev.slice(1));
  };

  return (
    <ul>
      {todos.map(todo => (
        // 올바른: todo.id를 key로 사용
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

function InputList({ items }) {
  return (
    <div>
      {items.map((item, index) => (
        // index를 key로 사용: 순서 변경 시 입력값이 섞임
        <input key={index} defaultValue={item.text} />
      ))}
    </div>
  );
}

// 예시:
// items = ["사과", "바나나"]
// 두 번째 입력칸에 "바나나 수정"을 입력함
// 배열을 역순으로 바꾸면:
// items = ["바나나", "사과"]
// React는 key=0 컴포넌트에 "사과"를 주지만
// key=0 컴포넌트의 DOM 상태는 아직 "바나나 수정"을 기억함 (controlled가 아닌 경우)

import { CSSTransition, TransitionGroup } from 'react-transition-group';

function AnimatedList({ items }) {
  return (
    <TransitionGroup>
      {items.map((item, index) => (
        // index를 key로 사용 시: 항목 삭제/추가 애니메이션이 엉뚱한 요소에 적용됨
        <CSSTransition key={index} timeout={300} classNames="fade">
          <li>{item.text}</li>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
}

// 안전한 index 사용 조건:
// 1. 리스트가 재정렬되지 않음
// 2. 필터링되지 않음 (삭제나 추가가 맨 뒤에서만 발생)
// 3. 항목에 컴포넌트 로컬 상태가 없음

// 안전한 예: 정적 목록
function StaticMenu({ menuItems }) {
  return (
    <nav>
      {menuItems.map((item, index) => (
        // 메뉴는 재정렬/삭제되지 않으므로 index 사용 가능
        <a key={index} href={item.href}>{item.label}</a>
      ))}
    </nav>
  );
}

// 안전한 예: 읽기 전용 단순 리스트
function ReadOnlyList({ names }) {
  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li> // 로컬 상태 없음, 재정렬 없음
      ))}
    </ul>
  );
}

// 1. 데이터베이스 ID (가장 이상적)
items.map(item => <Item key={item.id} />)

// 2. 복합 키 (두 필드를 조합)
items.map(item => <Item key={`${item.userId}-${item.postId}`} />)

// 3. 새 항목 추가 시 ID 생성
import { v4 as uuidv4 } from 'uuid';

function AddItemForm() {
  const [items, setItems] = useState([]);

  const addItem = (text) => {
    setItems(prev => [...prev, { id: uuidv4(), text }]);
    // 또는: { id: crypto.randomUUID(), text }  (브라우저 내장)
  };
}

// 4. 안정적인 해시값 사용
// 주의: Math.random()은 매 렌더링마다 달라지므로 절대 사용 금지
items.map(item => <Item key={Math.random()} />) // 절대 금지!

function UserProfile({ userId }) {
  const [formData, setFormData] = useState({});

  // userId가 바뀌어도 formData가 이전 사용자 것으로 유지되는 버그
  useEffect(() => {
    setFormData({}); // 이 방법은 깜빡임이 생길 수 있음
  }, [userId]);

  return <form>...</form>;
}

// key를 활용한 강제 리셋
function App() {
  const [selectedUserId, setSelectedUserId] = useState(1);

  return (
    // userId가 바뀌면 UserProfile이 완전히 새로 마운트됨
    <UserProfile key={selectedUserId} userId={selectedUserId} />
  );
}

// 폼 초기화에 활용
function FormContainer() {
  const [formKey, setFormKey] = useState(0);

  const resetForm = () => {
    setFormKey(prev => prev + 1); // key를 변경해 폼 컴포넌트 리마운트
  };

  return (
    <div>
      <ComplexForm key={formKey} />
      <button onClick={resetForm}>폼 초기화</button>
    </div>
  );
}