key

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

key 는 엘리먼트에 안정적인 고유성 을 보우혀가 위해 배열 내부의 엘리먼트에 지정해야 합니다

대부분의 경우 데이터의 ID를 key로 사용합니다

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

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

const todoItems = todos.map((todo, index) => (
  // Only do this if items have no stable IDs
  <li key={index}>{todo.text}</li>
));

key로 컴포넌트 추출하기

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => (
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <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")
);