인프런 커뮤니티 질문&답변
작성한 질문수
CommentItem에 props를 전달하지만 받지 않는데 TypeScript 에러가 안 나는 이유가 궁금합니다
작성
·
20
0
(10.3) 댓글 조회 기능 구현하기 8:50
CommentItem에서 props를 작성하기전
<CommentItem key={comment.id} {...comment} />에 {...commnet}를 넣어도 TypeScript에서 에러가 나지 않던데 이유가 궁금합니다.
// comment-list.tsx
{comments.map((comment) => (
<CommentItem key={comment.id} {...comment} />
))}
// comment-item.tsx
export default function CommentItem() { // props를 안 받음
return <div>하드코딩된 내용</div>
}답변 1
0
이정환 Winterlood
지식공유자
안녕하세요 호기쿤님 이정환입니다.
이 현상은 props가 객체 형태로 전달되기 때문에 발생하는 동작입니다.
TypeScript에서 객체 타입은 기본적으로 초과(추가적인) 프로퍼티를 허용하는 방식으로 동작합니다. 즉, 컴포넌트가 명시적으로 사용하지 않는 props가 전달되더라도, 타입 에러 없이 그대로 허용됩니다.
예를 들어 아래 코드에서 Props 타입에는 content만 정의되어 있지만 author, createdAt 같은 추가적인 프로퍼티를 함께 전달해도 에러가 발생하지 않습니다.
type Props = {
content: string;
};
function printContent(props: Props) {
console.log(props.content);
}
printContent({
content: "안녕하세요",
author: "정환",
createdAt: "2025-01-01",
});TypeScript는 이 객체가 content: string을 포함하고 있는지만 검사하고, 그 외의 프로퍼티는 타입 검사 대상에서 제외합니다.