CommentItem에 props를 전달하지만 받지 않는데 TypeScript 에러가 안 나는 이유가 궁금합니다
(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
1
안녕하세요 호기쿤님 이정환입니다.
이 현상은 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을 포함하고 있는지만 검사하고, 그 외의 프로퍼티는 타입 검사 대상에서 제외합니다.
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
21
2
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
37
2
6.8 zustand 세션 질문입니다.
0
83
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
67
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
0
240
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
72
2
4.11 바로 투두 삭제가 안됨 질문
0
77
3
매개변수 updatedTodo 관련 질문
0
61
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
76
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
64
2
4.6 id를 string으로 변경시 오류
0
59
2
리액트 타입스크립트 관련 질문있습니다.
0
57
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
93
2
ui 파일 질문드립니다.
0
67
1
tanstack query devtools에서 질문있습니다!
0
62
2
댓글 삭제 시 isPending 질문
0
58
2
두번째 예외상황에 대해 질문있습니다!
0
60
1
리액트 쿼리 질문입니다
0
63
2
개발자도구에서 components 가 안보입니다.
0
86
3
state 관리에 대한 정리
0
74
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
159
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
71
1
삭제가 바로 안되네요ㅠ
0
59
2
access 토큰은 꼭 소셜서버로부터 받아서 사용해야만하나요?!
0
75
2