React - key

❶ key란?

(1) React에서 key는 요소 목록의 각 항목에 추가해야 하는 특수 속성입니다.
(2) key 속성은 React에서 목록의 각 요소를 식별하고 변경이 발생할 때 목록을 효율적으로 업데이트하고 다시 렌더링하는 데 사용됩니다.

❷ key 사용 시 알아야 할 점

(1) React에서 요소 목록을 렌더링할 때 목록의 각 항목에 대한 key 속성을 포함하는 것이 중요합니다.
(2) key 속성은 목록의 각 항목에 대한 고유 식별자여야 합니다.
(3) 항목을 식별하는 ID, 이름 또는 기타 고유한 값일 수 있습니다.

❸ key 사용 방법

요소 목록에서 key 속성을 사용하는 방법의 예시입니다.

function MyListComponent(props) {
  const { items } = props;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

예시에서 items는 id 및 name 속성이 있는 객체의 배열입니다.
map을 사용하여 항목 목록을 렌더링할 때 key 속성은 각 항목의 id 속성으로 설정됩니다.
이렇게 하면 목록의 각 항목에 변경 사항이 발생할 때 React가 목록을 효율적으로 업데이트하고 다시 렌더링하는 데 사용할 수 있습니다.

key 속성은 목록의 각 항목에 대해 고유해야 하지만 전역적으로 고유할 필요는 없습니다.
즉, 속한 목록의 컨텍스트 내에서만 고유하면 됩니다.

요소 목록의 각 항목에 대한 key 속성을 포함하면 변경 사항이 발생할 때 React가 구성 요소를 효율적으로 업데이트하고 다시 렌더링하도록 돕습니다.