TypeScript에서 컴포넌트에 props넘기기

Blackeichi·2022년 10월 7일
0

다음과 같이 코드가 있을 때,

#Home.tsx

export const Home = () =>{
	return (
    	<LangSelect fixed={true} />
    )
}

#LangSelect.tsx

export const LangSelect = () => {
	return null;
}

다음과 같이 에러가 뜬다.

'{ fixed: boolean; }' 형식은 'IntrinsicAttributes' 형식에 할당할 수 없습니다.
'IntrinsicAttributes' 형식에 'fixed' 속성이 없습니다.

이것은 컴포넌트에서 props의 type을 정해주지 않아서 발생하는 에러이다.

이 에러는 React.FC를 이용하여 다음과 같이 해결할 수 있다.

#LangSelect.tsx

type Interface = {
  fixed?: boolean;
  //?를 붙여서 props가 필수가 아니게함.
};
export const LangSelect: React.FC<Interface> = ({ fixed=false }) => {
//fixed의 defalt값 및 타입 선언
	return null;
}
profile
프론트엔드 주니어 개발자 한정우입니다. 😁

0개의 댓글