[React] map에서 key를 사용하는 이유

Warning

Warning: Each child in a list should have a unique 'key' prop

위 경고 메시지는 React에서 동적으로 여러 개의 컴포넌트를 생성할 때 각 컴포넌트에 고유한 key props가 없을 경우에 발생한다. React는 key 값을 통해 컴포넌트의 고유성을 파악하고, 이를 통해 DOM 업데이트를 효율적으로 수행한다.

 

Rendering Lists

데이터 리스트에서 여러 유사한 컴포넌트를 렌더링하고 싶을 때가 많다. JavaScript 배열 메서드를 사용하여 이를 수행할 수 있다.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

 

위 리스트에서 각 목록의 유일한 차이점은 데이터이다. 서로 다른 데이터를 사용하여 동일한 컴포넌트의 여러 인스턴스를 표시해야 하는 경우가 종종 있다. JavaScript 배열 메서드인 map()를 사용하여 컴포넌트 목록을 렌더링할 수 있다.

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

Warning: Each child in a list should have a unique "key" prop. 경고 메시지가 발생한다

 

key의 역할

map() 호출 내부의 JSX 요소에는 항상 key가 필요하다! key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 해준다. 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해진다. 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 빠르고 올바르게 업데이트하는 데 도움이 된다.

 

JSX key를 사용하면 형제(sibling) 컴포넌트 사이에서 특정 항목을 고유하게 식별할 수 있다. 만약 재정렬로 인해 어떤 컴포넌트의 위치가 변경되더라도, 해당 컴포넌트가 사라지지 않는 한, React는 key를 통해 그 컴포넌트를 식별할 수 있다.

 

key의 특징

• 고유성: 각 key는 형제 컴포넌트들 사이에서 고유해야 하며, 이는 React가 렌더링 과정에서 컴포넌트를 식별할 수 있게 해준다.
• 렌더링 효율: key가 없을 경우 React는 리스트 내의 모든 요소를 재렌더링해야 할 가능성이 있어, 성능에 부정적인 영향을 미칠 수 있다.

 

key 지정 시 주의사항

• 배열 인덱스를 key로 사용하지 말자. 기본적으로 key를 지정하지 않으면, React는 배열 인덱스를 key로 사용한다. 그러나 렌더링한 항목의 순서는 새 항목이 삽입되거나, 삭제되거나, 배열의 순서가 바뀌는 등에 따라 변경될 수 있다. 따라서 배열 인덱스를 key로 사용하면 종종 미묘하고 혼란스러운 버그가 발생한다.
• 마찬가지로 key={math.random()}과 같이 즉석에서 key를 생성하지 말자. 렌더링될 때마다 key가 일치하지 않아 매번 모든 컴포넌트와 DOM이 다시 생성된다. 속도가 느려질 뿐만 아니라 리스트 항목 내부의 사용자 입력도 손실된다.
• 컴포넌트는 key를 props으로 받지 않고 React 자체에서 힌트로만 사용한다. 컴포넌트에 ID가 필요한 경우 별도의 props으로 전달해야 한다.

 

출처

• DOCS: rendering-lists