타입스크립트 Type 'undefined' is not assignable to type 오류 해결 방법

Type 'undefined' is not assignable to type

해당 오류 메시지는 예상되는 타입과 실제 할당되는 타입 간의 불일치를 나타냅니다.

오류가 발생 코드를 예시로 보여드리겠습니다 :

export default function CreatorFooter(): ReactElement {
	const [isExecute] = useRecoilState<boolean>(isExecute);

	return isExecute ? (
		<div>
			... 생략 ...
		</div>
	) : undefined;
}

'Element | undefined' 타입의 값을 'ReactElement<any, string | JSXElementConstructor<any>>' 타입을 기대하는 변수나 속성에 할당하려고 했기 때문에 에러가 발생한 것입니다.

이를 해결하기 위해서, 반환 타입 값을 'ReactElement | undefined'로 바꿔 줄 수도 있고, 다음 예시처럼 빈 프래그먼트를 반환하도록 수정할 수 있습니다.

export default function CreatorFooter(): ReactElement {
	const [isExecute] = useRecoilState<boolean>(isExecute);

	return isExecute ? (
		<div>
			... 생략 ...
		</div>
	) : ( <></>);
}

 

참고 : 위와 같이, 빈 프래그먼트를 반환하게 되면 컴포넌트는 실제 DOM에 렌더링되지 않지만, 컴포넌트 계층 구조는 유지됩니다.