Cannot read property “something” of undefined

내가 프로젝트를 진행하면서 가장 많이 겪었던 오류다. 구글링을 통해 해석한 오류의 원인은 UI Component를 불러오기 전에 미리 렌더링 되기 때문에 발생하는 오류라고 알게 되었다. 보통 대부분의 경우 이 오류를 해결하기 위해 아래처럼 코드를 작성한다.

{
  !loading && data.movie && (
    <>
      <Subtitle>
        {data.movie.language} / {data.movie.rating}
      </Subtitle>
      <Description>{data.movie.description_intro}</Description>
    </>
  );
}

이렇게 작성하면 보통 길어지게 되는데 이를 해결하기 위한 도구가 바로 Optional Chaining이라고 할 수 있다.

Optional Chaining

자세한 내용은 MDN 사이트 혹은 Javascript.Info 를 통해 확인할 수 있다.