React 배열에서 key 값이 필요한 이유

key

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

• 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트
• 리액트가 어떤 항목을 변경/추가/삭제할지 식별하는 것을 돕는다.

key값 지정하기

key값은 고유하게 식별 가능한 문자열을 사용한다. (대부분 데이터의 ID)

key가 필요한 이유

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

• key가 없는 상태에서 위처럼 요소가 추가되면 Duke, Villanova 노드가 유지된 채 Connecticut 노드가 추가되는 것이 아니라 모든 노드가 새로 만들어진다.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

• key가 있다면 Connecticut이 추가될 때 Duke, Villanova 노드는 이동하기만 한다.

주의사항

• key는 형제 사이에서만 고유한 값이어야 한다. (전체 범위에서 고유할 필요는 없다.) 따라서 두 개의 다른 배열을 만들 때에도 동일한 key를 사용할 수 있다.
• <ul> 안에 배열을 생성할 때 컴포넌트에 key를 지정해야 한다. (컴포넌트 내부의 <li>에 key를 지정하는 것은 무의미하다.)

// wrong
function ListItem(props) {
  const value = props.value;
  return (
    // 이곳에 key를 지정하면 무의미하다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 배열의 ListItem 엘리먼트가 key를 가져야 한다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

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

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

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);