key로 배열 항목의 순서 유지하기

• 리액트에서 렌더링되는 각 배열 항목에는 요소를 고유하게 식별할 수 있는 key를 부여해야 한다.
  • 예: map 메서드를 사용하여 JSX를 반환할 때는 항상 key가 필요

key의 역할
각 컴포넌트가 어떤 배열 항목에 해당하는지 리액트에게 알려주는 역할
각 배열 항목이 이동, 삽입, 삭제될 때 단순 배열 내의 순서에만 의존하면 전체 배열을 다 리렌더링해야 올바르게 처리를 할 수 있다.
하지만 고유한 값에 의존하면 해당 값만 찾아서 삽입, 삭제, 이동을 처리하면 되므로 훨씬 효율적이다. => 배열의 성능과 연관

• key는 map에서 자체 생성되는 인덱스 대신에 데이터 자체에서 꺼내거나 uuid 라이브러리 등으로 고유하게 생성되는 게 좋다.
  • map 메서드 자체에서 생성되는 인덱스는 고유성을 가지지 못한다.
• key는 형제(같은 배열 내 다른 요소) 간에만 고유하면 된다.
  • 다른 배열과는 무관하기 때문에 서로 다른 배열에서 같은 이름의 key를 쓰는 건 상관 없다.
• key는 렌더링 과정 중에 변경되어서는 안 된다.
  • 예: Math.random() 메서드로 key 지정 (x)
• 여러 개의 DOM 노드를 하나로 묶는 빈 태그에는 key를 넣을 수 없다.
  • 같은 기능을 하면서 key를 추가하고 싶다면 <Fragment> 태그를 명시적으로 사용해야 한다.
• key 속성은 다른 props들과 달리 key가 있는 하위 컴포넌트로 전달되지 않는다.