Typescript + React 컴포넌트 간에 props 데이터 전달 중 발생한 문제

부모 컴포넌트에서 자식 컴포넌트로 props를 설정하고 있었는데, 자꾸 에러가 발생했습니다.

IntrinsicAttributes 형식에 속성이 없다는 에러였습니다.

 

 

에러 메시지

'IntrinsicAttributes & ImovieInfo[]' 형식에 'nowPlayingMovies' 속성이 없습니다.ts(2322)

 

 

문제

부모 컴포넌트

- interface IProps에 detail 객체로 원소를 만들지 않았음. -> IProps 자체를 인터페이스로 쓰려고 해서 발생한 문제임.

- interface IProps에 isLoading을 타이핑해주지 않았음.

-  props 설정하는 자식컴포넌트의 파라미터에는 {...변수 명}으로 작성하지 않았음.

 

 

 

해결 방법

Container(props를 내려주는 컴포넌트)

- 컴포넌트 파라미터는 {...변수 명}으로 작성할 것.

- 넘겨주는 컴포넌트의 interface는 하나로 묶어서 사용할 것. 넘겨주는 파라미터 하나도 빠짐없이 interface에 타이핑할 것.

 

presenter(props를 내려받는 컴포넌트)

- interface import하기

- 넘겨받은 props들을 함수 파라미터에 적고, 타이핑.

 

 

 

 

문제2

위에 방법이 통하지 않는 경우가 있습니다.

Array<...>)[]): ImovieInfo[]; ... 27 more ...; flat<A, D extends number = 1>(thi...' 형식은 'ImovieInfo[]' 형식에 할당할 수 없습니다. 'Boolean & { length: number; toString(): string; toLocaleString(): string; pop(): ImovieInfo | undefined; push(...items: ImovieInfo[]): number; ... 28 more ...; flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<...>[]; }' 형식에 인덱스 시그니처가 없습니다.
ts(2322)