[react] 리스트와 Key - toString()

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

리액트 공식문서에서 리스트에서 key를 지정할 때 toString()을 사용했길래 그 이유가 궁금해져서 구글링을 해보았다.

https://softwareengineering.stackexchange.com/questions/381268/why-are-react-keys-limited-to-strings

관련된 글이 거의 없기는 했는데 이 글을 읽어보니 다른 데이터 타입도 가능하긴 하지만 String 타입을 권장한다고 한다. HTML 어트리뷰트가 스트링이기 때문에 내가 작성한 값도 스트링으로 serialize 되어야 한다고 하는데, 그렇지 않으면 추가적인 과정이 필요하다고 한다.

이제 이해가 되었다!