react map spread

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

위 코드처럼 map 안에 스프레드 연산자로 it의 정보를 props로 넘겨줄 수 있다. 그런데 혹시 DiaryItem에서 값이 안 찍힌다면? {...it} 앞 뒤 띄어쓰기를 꼭 해줘야 한다. 띄어쓰기가 한쪽이라도 없을 시 값이 undefined로 뜬다. ...it 안에는 author, content, created_date, emotion, id 값이 있다.

위 코드에서 스프레드 연산자로 받으면 props를 어떻게 받아와야 할까?

const DiaryItem = ({author, content, created_date, emotion, id}) => {
  console.log({author});
  return (
    <div className="DiaryItem">
      <div className="info">
        <span>
          작성자 : {author} | 감정점수 : {emotion}
        </span>
      </div>
    </div>
  );
};

export default DiaryItem;

요런 식으로 받아와서 쓴다.