[React&TS] ERROR: is not assignable to type 'IntrinsicAttributes

2022. 6. 16. 16:49프론트엔드/TypeScript

반응형

 

#문제발생

타입스크립트를 리액트에 처음 접목시켜보는데 에러가 발생했다.

Type '{ diaryList: ListType[]; }' is not assignable to type 'IntrinsicAttributes & ListType[]'. Property 'diaryList' does not exist on type 'IntrinsicAttributes & ListType[]'.
ts(2322)

 

What are IntrinsicAttributes in TypeScript?
IntrinsicAttributes interface can be used to specify extra properties used by the JSX framework which are not generally used by the components' props or arguments - for instance key in React.

https://www.typescriptlang.org/docs/handbook/jsx.html

 

props를 넘겨주면서 나온 오류였는데, 알고보니 자식컴포넌트에서 내가 props를 잘못 입력한 탓이었다.

const DiaryList = (diarylist: ListType[]) => {
  console.log(diarylist); // Object
  console.log(diarylist.length); //undefined
 }

 

props는 단일객체이고, 배열인 diarylist를 객체에다 집어넣고 타입은 배열로 설정..

그러니 당연히 diarylist는 객체로 나오고 총체적 난국이 되어버렸다...

 

#문제해결

interface Params {
  diarylist: ListType[];
}
const DiaryList = ({ diarylist }: Params) => {
	...
}
// 혹은
const DiaryList: FC<Params> = ({ diarylist }) => {
	...
}

 

 

#복습

1. Array<ListType> / ListType[] : 같은 의미지만 후자로 쓰는 것이 가독성이 좋음.

2. () => (return 값)

3. 객체와 배열 구분 잘 할 것

{...test} // Object
[...test] // Array

 

반응형