const ThumbnailItem = ({ id }: Meetup["id"]) 틀림!
=> { 코드에서 에러가 나는 이유는 타입 지정 방식이 잘못되었기 때문입니다.
문제의 원인은 다음과 같습니다:
Meetup["id"]는 number 타입을 의미합니다. 즉, 단일 값의 타입입니다.
하지만 함수 파라미터 { id }는 구조 분해 할당(destructuring)을 사용한 객체 패턴입니다. 이 패턴은 객체를 받아서 그 안의 id 속성을 추출합니다.
따라서 { id }: Meetup["id"]는 "객체에서 id를 추출하는데, 그 타입이 number여야 한다"라는 의미가 되어버립니다. 이는 문법적으로 맞지 않습니다.
올바른 타입 지정 방법은 두 가지가 있습니다:
현재 사용 중인 방식 (정상 작동):
typescript복사const ThumbnailItem = ({ id }: ThumbnailItemProps) => {
이 방식은 ThumbnailItemProps 인터페이스가 { id: number } 형태의 객체를 정의하므로 정상 작동합니다.
직접 객체 타입을 인라인으로 지정하는 방식:
typescript복사const ThumbnailItem = ({ id }: { id: number }) => {
Meetup 타입을 사용하고 싶다면:
typescript복사const ThumbnailItem = ({ id }: { id: Meetup['id'] }) => {
요약하자면, 구조 분해 할당을 사용할 때는 추출하려는 속성이 포함된 객체 타입을 지정해야 합니다. Meetup["id"]는 객체 타입이 아니라 속성의 타입(number)입니다
ThumbnailArea 컴포넌트에서 ThumbnailItem으로 props를 내려줄 때 에러가 발생했던 이유와 수정했을 때 에러가 사라진 이유를 설명해드리겠습니다.
타입스크립트에서 컴포넌트 간 props 전달시 발생하는 타입 오류는 주로 다음과 같은 원인이 있습니다:
props 타입 불일치:
부모 컴포넌트에서 내려주는 값의 타입과 자식 컴포넌트가 기대하는 props의 타입이 일치하지 않을 때 발생합니다.
객체 구조 분해 할당과 타입 지정:
React 컴포넌트에서 props는 하나의 객체로 전달됩니다.
구조 분해 할당 ({ id }) 사용 시, 타입은 객체 타입이어야 합니다.
원래 const ThumbnailItem = ({ id }: Meetup["id"]) => {에서 발생한 에러는:
Meetup["id"]는 number 타입(객체가 아닌 단일 값 타입)
하지만 { id }는 객체에서 id 속성을 추출하는 구조 분해 할당
즉, 객체를 기대하는 곳에 단일 값 타입을 지정해서 에러 발생
const ThumbnailItem = ({ id }: { id: Meetup['id'] }) => {로 수정했을 때:
{ id: Meetup['id'] }는 { id: number } 형태의 객체 타입
이제 구조 분해 할당 { id }와 타입 { id: number }가 일치
따라서 에러가 사라짐
간단히 말하면, 구조 분해 할당을 사용할 때는 그 타입도 객체 형태여야 합니다. Meetup["id"]는 number 타입이지만, { id: Meetup["id"] }는 id 속성을 가진 객체 타입입니다.
