1. 기본 리스트 컴포넌트

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

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

일반적으로 Component 안에서 리스트를 렌더링합니다.

이 코드를 실행하면 리스트의 각 항목에 key 를 넣어야 한다는 경고가 표시됩니다.

“key”는 Element 리스트를 만들 때 포함해야 하는 특수한 문자열 속성입니다.

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

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

2. Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.

key는 Element에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 합니다.

const listItems = numbers.map((number) =>
  <li key={number.toString()}>
		{number}
	</li>
);

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
		{todo.text}
	</li>
);

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.

const todoItems = todos.map((todo) =>
	// Only do this if items have no stable IDs
  // (항목에 안정적인 ID가 없는 경우에만 이 작업을 수행합니다.)
  <li key={todo.id}>
		{todo.text}
	</li>
);

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 Component의 state와 관련된 문제가 발생할 수 있습니다.