React list 에서 key를 사용해야 하는 이유

React에서 컴포넌트 리스트를 렌더링할 때 key prop을 지정하는 이유는 React의 내부적인 동작과 성능 최적화를 위해서입니다. key prop은 각 컴포넌트의 고유성을 나타내는 식별자로 사용됩니다.

key prop이 제공되면 React는 컴포넌트 간의 변경을 효율적으로 추적할 수 있습니다. React는 key 값을 이용하여 변경된 컴포넌트를 식별하고, 변경된 컴포넌트만 업데이트합니다. 이는 성능 향상을 위해 컴포넌트 재사용을 최대화하고, 필요한 부분만 업데이트하여 리렌더링을 줄입니다.

예를 들어, 컴포넌트 리스트를 렌더링할 때 key prop을 사용하지 않으면 컴포넌트가 추가, 제거 또는 재정렬될 때 React는 전체 리스트를 비교해야 합니다. 이는 비효율적인 동작이며, 성능 저하를 유발할 수 있습니다.

key prop의 값은 컴포넌트가 가진 고유한 식별자여야 합니다. 일반적으로 데이터의 고유 ID나 인덱스를 key로 사용합니다. 이렇게 하면 React가 각 컴포넌트를 고유하게 식별할 수 있습니다.

예시:

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

const ItemList = () => {
  return (
    <div>
      {items.map(item => (
        <Item key={item.id} name={item.name} />
      ))}
    </div>
  );
};

const Item = ({ name }) => {
  return <div>{name}</div>;
};

위의 예시에서 Item 컴포넌트는 각각 고유한 key prop을 가지고 있습니다. 이를 통해 React는 리스트의 변경 사항을 효율적으로 추적하고, 필요한 부분만 업데이트합니다.

따라서 컴포넌트 리스트를 렌더링할 때는 key prop을 지정하여 React의 성능을 최적화하는 데 도움을 줄 수 있습니다.

 

결론은 효율성 및 최적화를 위한 사용!