[React] React에서 배열을 렌더링할 때 Key를 써야하는 이유

React에서 배열을 렌더링할 때 key를 입력해야 하는 이유

React로 웹페이지를 구성하다 보면

<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()또는 filter() 같은 메소드를 사용하여 컴포넌트 목록을 렌더링 하게 되는데,

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
]; // 데이터를 javascript 배열로 구성

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.
Check the render method of List. See https://reactjs.org/link/warning-keys for more information.
at li
at List

이런식으로 대충 해석해보면

경고: 목록의 각 자식에는 고유한 “key” prop이 있어야 합니다.

이러한 뜻을 갖고있다.

결국 데이터를 조금 더 구조화 하여 고유한 key값을 가질수 있도록 만들어야 하는데

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

이때 위에서 언급했던 javaScript 메소드를 사용하여 렌더링 하는 과정에 key={item.id} 이러한 식으로 불러오는 배열에 대해 key값을 지정할 수 있다.

그럼 React에서 배열을 렌더링할 때 key를 써야하는 이유는 무엇일까?

먼저 key값은 React가 배열을 렌더링할 때 불러오는 데이터들 중에서 어떤 항목을 변경 또는 추가할지 삭제할지 식별하고 데이터에 어떤 변화가 일어나는지 더 빠르게 알아내기 위해서 사용된다.

즉, 렌더링하는 배열에 고유한 key값이 있어야 효율적으로 렌더링이 가능하다고 정리할 수 있는데, 예시로 위에서 map() 메소드를 사용하여 배열을 렌더링하는 과정에 불러오는 데이터 타겟인 mockData에는 key값을 설정해 주었지만 만약 마땅한 key값이 없는 경우에는 대신 index를 key값으로 사용하기도 하는데, 이러한 경우에는 배열이 재배열될시에 컴포넌트의 key값이 변경되면서 state가 서로 꼬이거나 의도하지 않은 방향으로 구현되는 문제도 발생할 수 있으므로 왠만한 경우를 제외하고는 데이터 배열 내부에 고유한 id값을 지정하여 주는것이 좋다.