🔑 key

키는 DOM 요소를 확인하기 위해 사용하는 유일한 것이다.

• Virtual DOM을 비교하는 과정에서 key가 있다면 더욱 빠르게 알아낼 수 있다.

• 키가 이전과 같으면 React는 DOM 요소가 이전과 동일한 구성 요소를 나타낸다고 가정한다.

• key 값은 중첩되면 안된다. key 값은 언제나 유일해야한다.

• 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용한다.

• key에 인덱스를 사용하는 것은 권장하지 않는다.

🤔 key에 index값을 쓰는 것을 권장하지 않을까?

반복되는 리스트나 아이템의 key로 index를 사용하였을 때 리스트를 반복하는데 쓰이는 배열에서 요소가 생성,제거,변경되었을 경우 key가 이를 추적하기 어렵기 때문이다.

📁 list and key

import React from "react";

const Test = () => {
  const fruits = ["apple", "banana", "carrot"];
  return (
    <div>
      {fruits.map((fruit,index) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </div>
  );
};

export default Test;

• 반복되는 여러개의 요소를 나열할 때 key값을 입력해준다.
  이유는 key는 요소의 변화 추적을 더 빨리 할 수 있게 도와주기 때문이다.

• 이 때 위에서 언급했듯이 되도록이면 index(map의 두번째 파리미터)를 키 값으로 할당하지 않는 것이 좋다.

그렇다해도 index를 key 값으로 써도 괜찮은 경우는 다음과 같다.
1. 배열과 요소들이 계산되거나 변경되지 않을 때
2. 배열이 재정렬이나 필터링이 되지 않을 때

참조 : Index as a key is an anti-pattern
Reconciliation