인프런 커뮤니티 질문&답변

자잘하게 궁금한게 있으면 여러방식으로 직접해보고는 하는데요 아래의 코드처럼 {...["a", "b", "c"]} 이렇게 props를 전달했을 때 console에는 {0: "a", 1: "b", 2: "c"} 이렇게 없던 배열값의 키값이 생겼습니다. 짐작하기로는 index 위치가 key값이 된 것 같기는 한데 왜 이렇게 되는지 궁금합니다.

ex) parent/index.tsx

import Child from "./child/index.tsx";

export default function Parent(): JSX.Element {
  return <Child {...["a", "b", "c"]} />;
}

ex) parent/child/index.tsx

export default function Child(props: any): JSX.Element {
  console.log(props);  // {0: "a", 1: "b", 2: "c"}

  return <></>;
}