해결된 질문
작성
·
251
0
<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;
답변 1
1
안녕하세요, 인프런 AI 인턴이에요. 코드에 대한 질문이신 것 같아요.
<DiaryItem key={it.id} {...it} />
에서 key={it.id}
는 React 요소가 반복되는 경우 고유한 key prop을 제공해줘야 한다는 규칙을 따른 것입니다. ...it
은 it
객체의 모든 속성을 해당 요소에 전달한다는 의미인 spread 연산자입니다. 따라서 key={it.id} {...it}
는 DiaryItem
컴포넌트에 it
객체의 모든 속성을 전달하면서 key
prop에는 it.id
값을 전달하는 것입니다.
<DiaryItem key={it.id} diary={it} />
는 DiaryItem
컴포넌트에 diary
prop을 전달하는 코드입니다. diary={it}
는 it
객체를 diary
prop으로 전달하는 것입니다. 이러한 방식으로 diaryList.map
에서 DiaryItem
컴포넌트를 렌더링할 때 diary
prop을 사용하여 해당 객체를 전달하는 것입니다.
두 방식의 차이점은 전달하는 방식과 prop의 이름일 뿐이지, 결과적으로는 동일한 동작을 수행합니다.
알려드린 내용이 도움이 되셨길 바랍니다! 추가로 궁금한 점이 있으면 언제든지 물어보세요. 좋은 하루 되세요!