React에서 배열을 렌더링할 때는 map()을 사용하고 각 요소에 key를 반드시 지정해야 해.

TypeScript에서는 배열 요소의 타입과 key의 안정성을 명확하게 정의하는 것이 중요해.

📘 예제 66: 배열 map 시 key 타입

const fruits = ['사과', '바나나', '포도'];

const FruitList = () => {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
};

✅ index를 key로 쓰는 건 데이터가 변하지 않을 때만 안전해.

삭제/추가되는 리스트엔 고유 ID를 사용하는 게 좋아.

📘 예제 67: 배열의 객체 타입 정의

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

const todos: Todo[] = [
  { id: 1, text: '공부하기', completed: false },
  { id: 2, text: '산책하기', completed: true },
];

const TodoList = () => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <span>{todo.text}</span> -{' '}
          <strong>{todo.completed ? '완료' : '미완료'}</strong>
        </li>
      ))}
    </ul>
  );
};

✅ 객체 배열을 렌더링할 때는 id 같은 고유값을 key로 지정해야 리렌더링 최적화가 제대로 작동돼.

📘 예제 68: index 대신 id를 key로

const UserList = ({
  users,
}: {
  users: { id: string; name: string }[];
}) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

✅ index는 같은 내용이 순서만 바뀌어도 React가 새 요소로 인식하지 못하는 문제가 있음.

그래서 **고유 식별자(id)**를 key로 쓰는 것이 안정적이야.

📘 예제 69: 리스트 필터링 후 렌더링

const TodoListFiltered = ({ completed }: { completed: boolean }) => {
  const todos = [
    { id: 1, text: '코딩', completed: true },
    { id: 2, text: '운동', completed: false },
  ];

  const filtered = todos.filter((todo) => todo.completed === completed);

  return (
    <ul>
      {filtered.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

✅ filter → map 패턴은 매우 흔하며, 이때도 key는 반드시 필터링된 요소의 고유값으로 사용해야 해.