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

안녕하세요 🙋‍♂️

import DiaryItem from "./DiaryItem";

const DiaryList = ({ diaryList }) => {
  return (
    <div className="DiaryList">
      <h2>일기 테스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}
      </div>
    </div>
  ); // 컴포넌트 이름과 동일하게 만들기
};

DiaryList.defaultProps = {
  diaryList: [],
};
export default DiaryList; // es 모듈 내보내기

{diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}

맨 밑에 부분을 보면 diayList가 부모한테 받은 리스트를 map으로 하나씩 찾은 it 객체 까지는 이해가 됩니다. 그리고 아이템 컴포넌트한테 id까지 전달 하는것도 이해됩니다.
이해가 조금 안 된 부분을 말씀 드릴게요
1. {...it}이 아이템 컴포넌트한테 보내는 prop인데 이전까지의 prop은 name={name} 이렇게 앞에 변수명이 있었는데 왜 이건 없이 보내는데
아이템에서 저렇게 받을 수 있나요?

const DiaryItem = ({ author, content, emotion, created_date }) => {

2.
여기서 it이라는 것은 내가 쓴 일기 하나하나 객체인데 일기리스트 state를 하나씩 map으로 접근해서 it 객체를 얻어내고 있는데 {...it} 이것은 스프리드 연산자로 전체 보내는 거 아닌가요? {it} 으로 보내도 되는지 확인해봤는데 에러가 뜨네요 map으로 돌면서 얻은 객체 it을 보내는데 왜 스프리드 연산자를 사용하는지 궁금합니다. it 안에 어떤 리스트의 하나의 일기 객체가 있을 텐데요

 {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}

 console.log(it) 해봤는데 아래와 같은 객체를 그냥 뿌리면 되는데 {...it}을 왜 사용하는지 궁금합니다. it 자체에 정보가 다 있지 않나요??