REACT의 key props를 사용하는 이유

REACT

해당 포스팅에서는 REACT의 key props를 사용하는 이유에 대해 다룹니다.

이번 포스팅 목차

• REACT의 key props를 사용하는 이유
  

리액트의 key props를 사용하는 이유

리액트에서 key props 는 리스트 나 동적인 컴포넌트 배열 을 렌더링할 때 사용됩니다. 이는 각 컴포넌트를 고유하게 식별 할 수 있게 하여 효율적인 업데이트 를 가능하게 합니다. key props 를 사용하는 이유와 그 중요성에 대해 자세히 설명하겠습니다.

1. Key props의 역할

리액트는 가상 DOM(Virtual DOM) 을 사용하여 실제 DOM 조작을 최소화하고 성능을 최적화합니다. key props 는 리액트가 어떤 항목이 변경, 추가 또는 제거되었는지 효율적으로 파악 할 수 있도록 도와줍니다. 이는 리액트의 재조정(reconciliation) 과정에서 중요한 역할을 합니다.

2. Key props가 필요한 이유

• 고유한 식별자 제공: key props 는 각 컴포넌트를 고유하게 식별 합니다. 이를 통해 리액트는 리스트 내에서 어떤 항목이 변경되었는지 정확하게 추적 할 수 있습니다.

• 효율적인 업데이트: key props 를 사용하면 리액트는 항목의 변경 사항을 더 효율적으로 감지 하고 필요한 부분만 업데이트 합니다. 이는 불필요한 재렌더링을 방지하여 성능을 향상시킵니다.

• 정렬과 재정렬: 리스트 항목이 정렬되거나 재정렬 될 때 key props 는 리액트가 항목의 위치 변경을 정확하게 인식하고 처리할 수 있도록 합니다.

3. Key props 사용 예시

리스트를 렌더링할 때 key props 를 사용하는 예시를 살펴보겠습니다.

기본 사용 예시

아래 예시에서 numbers 배열의 각 항목에 대해 고유한 key 를 제공하여 리액트가 각 항목을 고유하게 식별할 수 있도록 합니다.

import React from 'react';

function ListItem({ value }) {
  return <li>{value}</li>;
}

function NumberList({ numbers }) {
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

export default NumberList;

객체 배열 사용 예시

아래 예시에서 객체 배열을 렌더링하며, 각 객체의 id 속성을 key 로 사용합니다. 객체의 id는 일반적으로 고유하기 때문에, 적절한 key 로 사용될 수 있습니다.

import React from 'react';

function ListItem({ item }) {
  return <li>{item.name}</li>;
}

function ItemList({ items }) {
  const listItems = items.map((item) =>
    <ListItem key={item.id} item={item} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

export default ItemList;

4. 잘못된 Key 사용 예시

인덱스를 Key로 사용하는 경우

인덱스를 key 로 사용하는 것은 권장되지 않습니다. 리스트 항목이 재정렬되거나 삽입/삭제될 때 인덱스는 변할 수 있으며, 이는 리액트의 효율적인 업데이트를 방해할 수 있습니다.

function ListItem({ value }) {
  return <li>{value}</li>;
}

function NumberList({ numbers }) {
  const listItems = numbers.map((number, index) =>
    <ListItem key={index} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

5. Key props의 중요한 점

• 고유해야 함: key 는 같은 리스트 내에서 고유해야 합니다. 중복된 key 는 리액트가 항목을 제대로 식별하지 못하게 합니다.

• 불변성: key 는 항목이 변경되거나 재정렬될 때 변하지 않아야 합니다. 일반적으로 데이터베이스의 고유 ID 나 객체의 고유 속성 을 사용합니다.

마무리

리액트에서 key props 는 리스트와 동적인 컴포넌트 배열을 렌더링할 때 효율적인 업데이트와 정확한 식별 을 위해 매우 중요 합니다. key 를 사용하면 리액트가 어떤 항목이 변경되었는지 효율적으로 파악할 수 있으며, 이는 성능 최적화와 안정적인 UI 업데이트를 가능하게 합니다. 따라서 항상 리스트를 렌더링할 때 적절한 key 를 사용하여 리액트가 컴포넌트를 정확하게 관리할 수 있도록 해야 합니다.