🔑 리스트

• 반복된 컴포넌트 렌더링 방법
  • Javascript의 Array.prototype.map() 메소드를 이용한다.
  • 일반적으로 컴포넌트 안에서 리스트를 렌더링 한다.

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

🔑 Key

• React가 어떤 항목을 변경, 추가 또는 삭제 할때, 엘리먼트 식별을 돕는다.

• 엘리먼트에 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

• 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 가장 좋다.

• 대부분의 경우 데이터의 Id를 key로 사용한다. (렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 index를 key로 사용할 수 있다.)

• key는 전체적으로 고유할 필요는 없으며, 배열 안의 형제 항목들 중에서만 고유할 필요성을 갖는다.

  
  // Id를 key로 사용한 예
  const todoItems = todos.map((todo) =>
    <li key={todo.id}>
      {todo.text};
    </li>
  );
  
  // index를 key로 사용한 예
  const todoItems = todos.map((todo, idx) =>
    <li key={idx}>
      {todo.text};
    </li>
  );