[TypeScript] is possibly 'undefined' 에러 해결법

다음 코드의 문제가 무엇일까?

{relData?.totalElements > 1 && (
	<Button
    	variant='secondary'
		className='px-4'
        onClick={() => handleChangeRepPopup(!showChangeRepPop)}
        style={{ marginRight: '10px' }}
    >
    {t('button.filecomponent.changeRep')}
    </Button>
)}

→ 'relData.totalElements' is possibly 'undefined'.

콘솔에 이런 오류가 출력 된다.

말 그대로,  relData.totalElements

가 undefined 일 수 있기 때문이 이런 오류가 나는 것이다.

 

가장 간단한 해결방법은

relData && relData.totalElements > 1 && (

이렇게 조건부 렌더링을 이용하는 것이다. 

relData가 존재할 때만 다음 조건문과 함께 작동하고 렌더링 되기 때문에,

relData.totalElements 가 undefined 일 가능성을 없앨 수 있다. 

 

이외의 해결 방법이 궁금하다면 아래의 포스팅을 참고하길 바란다.

https://linguinecode.com/post/how-to-solve-typescript-possibly-undefined-value

How to solve TypeScript possibly undefined value

TypeScript possibly undefined value 해결 하는 법(+번역)