-
너무나도 당연한건데 정말 1시간 이상 어이없게 삽질해서 공유!
👻 : {} 형식은 IntrinsicAttributes & ArrObjProps[] 형식에 할당할 수 없습니다. IntrinsicAttributes & ArrObjProps[] 형식에 ArrObjProps 속성이 없습니다.
// 부모 컴포넌트 const Parent = () => { // 객체 배열이 담겨있는 변수 arrObj const arrObj:ArrObjProps[] = [{...},{...}] return( <div> ... <Child arrObj={arrObj}/> </div> ) } export default Parent // 자식 컴포넌트 (❌ ERROR ❌) const Child = ({arrObj}:ArrObjProps[]) => { return( <div> 자식 컴포넌트입니다. </div> ) } export default Child
여기서 중요한 것은 우리는 props를 받아오면 꼭 type을 지정해 줘야한다. 근데 이전까지는 여러가지의 props를 받아왔기 때문에 새로운 type을 항상 따로 지정해 줬었는데 하나로 지정하니 재사용 하면 되지 않을까 하고 사용할랬는데 에러!
정말 별 거 아니다 😂
비구조화할당으로 props를 받아오기 때문에 type역시 그렇게 전해줘야 한다.
// 자식 컴포넌트 (✨SOLUTION 1✨) const Child = ({arrObj}:{arrObj: ArrObjProps[]}) => { return( <div> 자식 컴포넌트입니다. </div> ) } export default Child // 자식 컴포넌트 (✨SOLUTION 2✨) type SolutionProps = { arrObj: ArrObjProps[] } const Child = ({arrObj}:SolutionProps) => { return( <div> 자식 컴포넌트입니다. </div> ) } export default Child
- 항상 2번처럼 정해줬기 때문에 하나여도 그렇게 적용된다고 생각없이 한 것 ㅠㅠ
'Error' 카테고리의 다른 글
yarn : Could not resolve dependency... (0) 2022.04.11 Unexpected token u in JSON at position 0 Error in JS (0) 2022.04.06 config: import ReactDOM from 'react-dom'이 안될 때 (0) 2022.03.24 yarn : 이 시스템에서 스크립트를 실행할 수 없으므로... (0) 2022.03.12 Expected an assignment or function call and instead saw an expression (0) 2022.03.09 댓글