여러개의 Element를 리스트 고차함수를 통해 만들 수 있다.

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

<ul>{listItems}</ul>

기본 리스트 컴포넌트

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];
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<NumberList numbers={numbers} />);

렌더링을 진행하면, key를 넣어야한다는 문구가 뜬다. 이는 Element list를 만들 때 포함해야하는 특수한 문자열 attribute이다.

Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지를 식별하는 것을 돕는다. Element의 안정적인 고유성을 부여하기 위해 사용한다. 각 항목의 고유성을 나타내는 문자열을 사용한다.(id) 하지만, 고유한 값이 없다면 index를 키로 사용한다. 하지만 이는 단점이 있다. (참고: https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318)

Key로 컴포넌트 추출하기

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

다음을 보자

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

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

여기서 배열은 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>
  );
}

⇒ 대부분 map()메소드에서 사용되는 컴포넌트에 넣는게 좋다.

Key는 형제사이에서만 고유하면 된다.

각각 다른 리스트라면 key가 같아도 상관 없다. 그리고 key는 컴포넌트로 전달되지 않는다. 전달하고 싶다면 다른 키를 이용해서 전달해야 한다.