list와 key

자바스크립트의 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

 

여러개의 컴포넌트 렌더링

엘리먼트 모음을 만들고  {}를 이용하여 JSX에 포함 시킬수 있다.

자바스크립트의 map() 함수를 이용하여 반복하고 각 항목에 대해 엘리먼트를 반환하도록한다.

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

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

 

key

엘리먼트 리스트를 만들 때 포함해야하는 특수한 문자열 어트리뷰트이다. key는 React가 어던 항목을 변경, 추가, 삭제 식별을 도우며 key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

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

 대부분의 경우 데이터의 id를 key로 저장한다.

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

 또한 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장되지 않는다. 성능이나 state에서 문제를 만들수 있다.

 

key는 주변 배열의 context에서만 의미를 가진다.

ex) ListItem 컴포넌트를 추출한 경우 ListItem 안에 있는 <li>엘리먼트가 아니라 배열의 <ListItem /> 엘리먼트가 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>
  );
}

 

key는 배열안에서 형제 사이에서 고유해야 하며 전체 범위에서 고유할 필요는 없다.