리액트에서 배열을 렌더링할 때 key를 써야 하는 이유

 

 

리액트에서 배열을 렌더링할 때 key를 사용하는 이유는 성능 최적화와 올바른 컴포넌트 업데이트를 위해서입니다.

구체적으로는 다음과 같은 이유가 있습니다

 

1. 변경 사항 추적:
   • key는 리액트가 각 컴포넌트를 구분하는 고유한 식별자입니다. 이를 통해 리액트는 어떤 항목이 변경, 추가, 또는 제거되었는지 효율적으로 추적할 수 있습니다.
2. 성능 최적화:
   • key를 사용하면 리액트가 기존 요소를 재사용하고 필요할 때만 새 요소를 생성하거나 제거할 수 있습니다. 이는 DOM 조작을 최소화하고 성능을 최적화하는 데 도움이 됩니다.
3. 일관된 상태 유지:
   • 컴포넌트의 상태나 이벤트 핸들러가 일관되게 유지될 수 있습니다. key가 없으면 리액트는 컴포넌트를 재사용하는 대신 다시 렌더링할 수 있고, 이 경우 컴포넌트의 상태가 초기화될 수 있습니다.

 

 

import React from 'react';

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

export default ItemList;

 

 

 

요약

• 고유성: key는 리스트 내에서 각 항목을 고유하게 식별합니다.
• 효율성: 리액트가 변경 사항을 효율적으로 감지하고 업데이트합니다.
• 일관성: 컴포넌트 상태와 이벤트 핸들러의 일관성을 유지합니다.