TIL - 2022.05.12(원티드 프리온보딩)

오늘도 영화앱 과제를 진행하였다. 개발을 하면서 간단한 오류도 만나고, 복잡한 오류도 만나지만 sample코드와 google과 함께라면 문제 없다!

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

자식컴포넌트에 props를 전달해줄때 타입을 맞춰서 보내줘야하는데 타입이 맞지 않을때 발생했다고 생각하는데 정확한 이유를 좀 더 찾아봐야 할 것 같다
일단 해결법은

{movieData?.map((item) => (
        <MovieItem key={item.imdbID} item={item} />
      ))}

위의 코드를 구조분해 할당을 이용하여

{movieData?.map((item) => (
        <MovieItem key={item.imdbID} {...item} />
      ))}

해결이 된다. 일단 간단하게 찾아본바로는 item을 선언해주면 그 값이 item.item 이 되면서 한번 감싸지기 때문에 타입이 맞지 않은 것으로 보인다.
일단 스프레드 연산자를 이용하여 자식컴포넌트에 전달하여 해결할 수 있었다.

https://pinokio0702.tistory.com/365

구조분해 할당

객체의값을 추출하여 바로 선언하는 것

스프레드 연산자

내부의 값을 꺼내서 선언

https://learnjs.vlpt.us/useful/07-spread-and-rest.html