Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes & PopperType'.ts(2322)

문제 발생

 

Popper.tsx 컴포넌트 구현 중 발생한 에러입니다.

 

Popper의 종류(header, portfolioItem)를 구분하기 위해 type Popper를 정의했습니다.
(Popper 종류에 따라 메뉴 구성이 다릅니다)

 

export type PopperType = 'header' | 'portfolioItem';

 

Header.tsx 컴포넌트의 메뉴 버튼을 클릭했을 때, header 타입의 Popper가 나타나야 하므로 다음과 같이 호출했습니다.

 

// Header.tsx

{ menuOpen &&
    <Popper type='header'/>
}

 

그리고 다음과 같은 에러가 발생했습니다.

 

Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes & PopperType'.ts(2322)

 

 

 

원인

함수형 컴포넌트에서 props를 받을 때 표현식 {}으로 감싸지 않아 발생한 문제입니다.

 

가끔 이런 기본적인 실수를 할 때면 참 그렇습니다.

 

 

 

해결 방법

Popper.tsx에서 props를 다음과 같이 받으면 해결됩니다.

function Popper(props: { type: Popper, a: number, b: string }) { 
  const { type, a, b } = props;
}

 

props 객체로 받은 뒤 구조 분해 할당(비구조화 할당)으로 추출합니다.
{ type: Popper, a: number, b: string }이 props에 대한 타입 정의가 됩니다.

하지만 가독성이 떨어지므로 다음과 같이 Popper 컴포넌트 props 타입을 별도로 정의하는 게 더 깔끔합니다.

 

interface PopperProp = {
  type: Popper;
  a: number;
  b: string;
}

function Popper({ type, a, b }: PopperProp)