Error Log

TypeError: Cannot read property of undefined

프로젝트를 진행하며 서버로 자료를 요청해 페이지에 랜링 하는 과정에서 저런 에러를 맞이하였다.

비동기 작업을 통해 값을 받아 오는 것 보다 랜더링이 빠르면 값을 찾을 수 없어서 그런 것 같았다.

해결 ❗️ 💡

안전연산자 ?.를 사용하여 해결 하였습니다.

안전 연산자는 페이지가 실제로 사용할 수있을 때까지 값을 검색하지 않도록 돕고 오류를 저장하며

경우에 따라 훨씬 더 문제가되는 시나리오를 방지 할 수 있다고 한다.

비동기적으로 받아온 데이터를 받아오기 전까지 랜더링을 하는 것을 막아주는 역할을 한다고 함.

지저분한 방어 로직이나 유틸리티 라이브러리 없이 ?.를 사용하여 안전하고 깔끔하게 속성값에

접근할 수 있다고 한다.

{
  list[0]?.photo_link ? <Img src={list[0].photo_link}>: null 
}

이런 식으로 사용한다.