코드 질문있습니다.

  <DiaryItem key={it.id} {...it} />

스프레드 연산자는 이해가 가는데

key={it.id} 옆에 바로 붙혀서 state객체를 넣을수 있는건가요 ?? 이건 어떤 문법일까요

<DiaryItem key={it.id} {...it} />
<DiaryItem key={it.id} diary={it} />

...을 써서 넣는거랑 안쓰고 앞에 diary = {it}으로 명시하고 넣는거랑 어떤차이가 있을까요 ?

전 이렇게 바꿨는데 ..이해가 안되서import DiaryItem from "./DiaryItem";

const DiaryList = ({diaryList})=>
{   console.log(diaryList);
    return (
    <div className="DiaryList">
        <h2>일기리스트</h2> 
        <h4>{diaryList.length}개의 일기가 있습니다</h4>
        <div>
            {diaryList.map((it) => (
                <DiaryItem key={it.id} diary={it} />
            ))}
        </div>
    </div>
    );
};
DiaryList.defaultProps = 
{
    diaryList : [],
}
export default DiaryList;