[에러노트] useQuery return undefined

문제상황

해당 코드를 작성하였더니 밑에 오류발생....

products를 받아오지 못했나? 그래서 products를 콘솔에 찍어봤는데 찍혔지만 length는 못받아온다고 에러가 났음
이해가 안가서 products의 값이 존재할 때 length가 출력되도록 함

처음에는 products가 undefined이다가 후에 product가 찍히는걸 발견할 수 있었음

이유는 product 변수가 undefined인 상태에서 .length 프로퍼티에 접근하려 하면 TypeError가 발생하기 때문이다. 이는 undefined 타입에는 .length 프로퍼티가 존재하지 않기 때문에 발생한다.

해결 방법

• console.log(product && product.length)와 같이 product 변수가 undefined인 경우를 예외 처리해 주어야한다.
  && 연산자를 이용하여 product 변수가 undefined인 경우, 뒤의 식인 product.length를 실행하지 않고 undefined를 반환하도록 처리할 수 있다.

• if (isLoading) return 후 console.log(product.length) 출력한다.
  useQuery hook을 사용하면서 데이터를 비동기적으로 가져오는 동안 로딩 상태를 표시할 수 있는데 isLoading 변수는 useQuery가 실행되는 동안 데이터를 가져오고 있는지 여부를 나타내는 불리언(Boolean) 값이다.
  따라서, if (isLoading) return 구문은 데이터를 가져오는 중일 때, 렌더링을 중단하고 로딩 상태를 나타내는 UI를 표시하기 위한 코드입니다. 이 코드는 컴포넌트 함수의 가장 상단에서 실행됩니다. 만약 isLoading이 true인 경우, 컴포넌트 함수의 반환문을 실행하지 않고 컴포넌트를 종료하기 때문이다.
  isLoading 값이 false인 경우에는 서버에서 가져온 데이터를 이용하여 요소를 생성하여 렌더링하므로 에러가 해결된다.