[TypeScript]나만 보는 TypeScript 기초 메모장(map 고유ID)

index를 사용하는 이유 & ID를 쓰는 이유

map()을 사용할 때, React는 각 항목이 고유한 식별자(key)를 가지면 React가 리스트를 효율적으로 업데이트할 수 있습니다.

index를 key로 사용한 경우

{tasks.map((task, index) => ( <TodoItem key={index} task={task} /> ))}

 

index는 배열에서 현재 항목의 위치(순서)를 나타냄.
예를 들어, tasks = ["A", "B", "C"]가 있으면

0	A
1	B
2	C

문제점

• 새로운 항목이 추가되거나 삭제되면 index가 바뀜.
• React는 key 값이 바뀌는 걸 감지 못하고, 예상치 못한 렌더링 문제가 발생 가능성.

고유한 ID를 key로 사용한 경우(추천)

TodoList.tsx

import React, { useState } from "react";
import TodoItem from "./TodoItem";

type Task = { 객체 형태로 저장
  id: number;
  name: string;
};

const TodoList: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([]); //Task 객체타입으로 선언
  const [input, setInput] = useState<string>("");

  const addTask = () => {
    if (input.trim() === "") return;

    // 할 일 객체 생성(랜덤 ID 사용)
    const newTask: Task = {
      id: Date.now(), // 현재시간을 ID로 사용(고유한 값 보장)
      name: input,
    };

    setTasks([...tasks, newTask]);
    setInput("");
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a task"
      />
      <button onClick={addTask}>Add</button>
      <ul>
        {tasks.map((task) => (
          <TodoItem key={task.id} task={task.name} />
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

TodoItem.tsx

import React from "react";

type TodoItemProps = {
  task: string;
};

const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
  return <li>{task}</li>;
};

export default TodoItem;

 

id를 key로 사용하면?

각 항목이 고유한 값을 가지므로 React가 변경을 추적하기 쉬워짐.
삭제하거나 순서를 바꿔도 문제가 없음!
index는 값이 바뀔 수 있지만, id는 변하지 않음!

최종 예제 실행 시

• 사용자가 "A" 입력 후 "Add" 클릭
  tasks = [{ id: 1707912023456, name: "A" }]
• "B" 추가
  tasks = [{ id: 1707912023456, name: "A" }, { id: 1707912023467, name: "B" }]
• "A"를 삭제해도 다른 ID들은 그대로 유지