[TypeScript] cannot read properties of undefined 에러 원인 및 해결방법

Intro

안녕하세요. 타입스크립트를 사용하던 도중 아래와 같은 오류가 발생했습니다. 

 

Why?

해당 properties의 값을 읽을 수 없기 때문에 발생하는 오류입니다.

 

How to solve the problem

해당 에러를 해결하는 방법은 여러가지인데요, 저는 그 중에서도 Optional Chaining 연산자 (물음표 연산자)를 사용하여 해당 오류를 해결할 수 있었습니다. 

 

코드 사용 예제는 아래와 같습니다. 

return (
  <div className"App">
    <div>{item?.name}</div>
  </div>
)

이렇게 Optional Chaining 연산자 (물음표 연산자)를 사용할 경우 유효한 값이 없을 때는 undefined를 반환하고, 값이 있을 때는 Optional Chaining 연산자 이후 내용을 실행합니다. 따라서 해당 오류를 방지할 수 있습니다.