[React] Cannot read properties of undefined... Error

위와 같이 react-query를 사용하여 데이터를 받아와 출력한 결과 

Home.jsx:16 Uncaught TypeError: Cannot read properties of undefined (reading 'data') 이와 같은 에러가 발생하였다.

 

데이터를 받아오는 과정은 비동기적으로 수행되고, 콘솔에 data를 출력하는 라인이 바로 실행되는데, data에 값이 없기 때문이다. 

위와 같이 useEffect를 사용하여 컴포넌트가 마운트된 후 2초 뒤에 실행시키도록 하여도 똑같은 에러가 발생한다. 

 Get요청을 보내는 쿼리도 컴포넌트가 마운트되며 생성되고 이와 동시에 useEffect안의 함수도 실행되는데, 아마 실행과 동시에 setTimeout 함수와는 관계없이 data의 state를 check 하는 모양인듯 싶다.. 

위와 같이 data를 출력하는 코드를 콜백 함수로 작성하여 2초후에 실행되도록 했을 때 

데이터가 잘 출력되는 것을 확인할 수 있었다.

 

하지만 setTimeout 코드가 실행되는 순간 data값은 정의되어 있지 않으므로, 

이와 같은 에러는 여전히 발생한다. 

 

데이터를 뿌려줄 때도 

위와 같이 상태에 맞는 조건에 대한 값을 모두 지정해줘야 데이터가 잘 뿌려지는 것을 확인할 수 있었다.