TypeScript IntrinsicAttributes 에러

---

문제 상황

⇒ 해당 웨크스페이스 목록 페이지에서 all groupe에 있는 진행전, 진행중, 모두를 각각 컴포넌트로 만들려고 한다. 그래서 진행전을 따로 자식 컴포넌트로 만들고 워크스페이스들의 정보가 담겨있는 allGroupeTabsData를 props로 넘겨주고 타입을 지정해주니 해당 IntrinsicAttributes 오류가 떴다.

💡

Type '{ allGroupeTabsData: IAllGroupeTabsDataProps[]; }' is not assignable to type 'IntrinsicAttributes & IAllGroupeTabsDataProps[]'.
Property 'allGroupeTabsData' does not exist on type 'IntrinsicAttributes & IAllGroupeTabsDataProps[]'.

TypeScript IntrinsicAttributes 오류

IntrinsicAttributes 오류에 대해 찾아보니, 해당 오류는 map함수를 이용해서 부모 컴포넌트에서 자식 컴포넌트로 props를 보낼 때 나는 오류이다. 즉, [{...}, {...}, {...}] 해당되는 데이터를 map함수를 이용해서 {...} 객체 형식으로 props를 보낼 때 타입 오류에 해당되는 내용이다.

그래서 기존에는 첫 번째와 같이 자식 컴포넌트에서 props의 타입을 지정해줬지만, 두 번째 타입 지정 방식으로 props 타입을 바꿨더니 IntrinsicAttributes 오류가 해결됐다.

// 기존 타입 지정
function BeforeP(allGroupeTabsData: IAllGroupeTabsDataProps[]) {} 

// 바뀐 타입 지정
function BeforeP({
  allGroupeTabsData,
}: {
  allGroupeTabsData: IAllGroupeTabsDataProps[];
}) {}

그렇다면, 저 두 개의 타입 지정 방식은 어떤 차이가 있을까?

// 기존 타입 지정
function BeforeP(allGroupeTabsData: IAllGroupeTabsDataProps[]) {} 

⇒ 해당 방식은 배열 자체를 props로 받으려고 했던 것이다. 즉, React는 props를 객체 형태로 받는데 배열로 props를 넘겨받으니 오류가 발생한 것이다.

// 바뀐 타입 지정
function BeforeP({
  allGroupeTabsData,
}: {
  allGroupeTabsData: IAllGroupeTabsDataProps[];
}) {}

⇒ 바뀐 방식은 객체 형태로 props를 받으며, 그 객체 안에 배열이 있는 형태라는 뜻이다. 즉 allGroupeTabsData라는 속성을 가진 객체이며, 그 속성의 값은 IAllGroupeTabsDataProps 타입의 배열이다라는 의미이다.

다른 방법

// 바뀐 타입 지정
function BeforeP({
  allGroupeTabsData,
}: {
  allGroupeTabsData: IAllGroupeTabsDataProps[];
}) {}

⇒ 굳이 타입을 직접 지정해주지 않고, interface를 활용하는 방법도 있다.

interface IBeforePProps {
	allGroupeTabsData: IAllGroupeTabsDataProps[];
}

function BeforeP({
  allGroupeTabsData,
}: IBeforePProps) {}

⇒ 이렇게 interface를 활용해서 타입을 미리 지정해놓을 수 있다.