[React] Warning: Each child in a list should have a unique "key" prop.

React 에서 Key 가 필요한 이유

• Map 사용시 고유한 Key 가 필요하다.
• React 는 상태를 메모리에 저장하고 있다가 변경된 부분만 렌더링 한다.
• Key 값이 없으면 모든 데이터를 비교해야 하지만 Key 가 있으면 Key만 비교하면 된다.

• <ul>
    {props.users.map((user) => (
      <li key={user.id}>
        {user.username} ({user.age} years old)
      </li>
    ))}
  </ul>

Map 에서 index 를 Key로 하면 안되는 이유

• 0번의 index 가 삭제되면 React 가 변경을 감지하여 리렌더링 되고 0번 부터 다시 매핑한다.
• 1번 인덱스가 0번으로 매핑이 된다.
• 결론적으로 인덱스가 추가되거나 삭제되면 값이 바뀌기 때문에 index 를 key 로 사용하는것은 안좋다.