[React] list element

리스트 element를 만들려면 key를 포함해야 한다
Key가 있어야 React가 어떤 항목을 변경,추가 또는 삭제할 지 식별할 수 있음 (고유성 부여)

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

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

대부분의 경우 데이터의 id를 key로 사용

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

정 안되면 index를 key로 사용하지만 state와 관련한 문제가 생길 수 있음

{numbers.map((number, index) =>
	<ListItem key={index} value={number} />
)}

key의 context

key는 주변 배열의 context에서만 의미가 있기 때문에 추출하려는 컴포넌트 내의 엘리먼트가 아니라 배열의 element가 key를 가져야 함
전체 범위에서 고유할 필요는 없고 같은 형제 element 사이에서만 고유하면 됨

function ListItem(props) {
  // 여기는 key 지정 필요 X
  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>
  );
}

key는 props로 전달되지 않음