[리액트] Get API 호출했을때 Undefined 값이 나옴

새로 맡은 프로젝트 api연결을 시작해서 열심히 연결하는데.. 난관에 봉착했다.

문제는 get API를 연결하는데 data를 불러와서 console.log(data)까지 다 잘찍히는걸 확인했는데(연결은 잘 됐다는 의미)

<S.BlackText>{`${data.projectNum}개`}</S.BlackText>

 

이런식으로 사용하면 UI에는 undefined가 뜨더라..

console창에는 잘 나오는 모습

Undefined가 나오는 이유는 다음과 같다.

1. 값이 할당되기 전에 페이지가 로드됨(=아직 존재하지 않는 경우) (isLoading을 사용해야 하는 이유)

2. 객체에 없는 프로퍼티에 접근한 경우

3. 변수에 값을 초기화하지 않는 경우

(null과는 명백히 다름. undefined는 정의되기 전의 일종의 상태 같은 값, null은 빈 값이라는 명확한 의미를 가짐)

 

그리고.. 약 3시간 넘게 챗지피티+구글과 씨름한 결과.. 정말 어이없는 곳에서 오류 발견

API 응답에서 data 객체의 구조를 보면, 실제 데이터는 data 속성 안에 있는 data 객체에 담겨 있다. (2번 경우)

따라서 data.data.projectNum이라고 해줘야 했던 것(이건 내가 앞에 변수를 data로 해놔서 더 헷갈렸던것 같다.. classInfo로 저장한 것도 있었는데 그건 classInfo.data.projectNum~ 이런식으로 수정해주니 같이 해결됐다.)

 

다시는 이런 바보같은 실수를 하지않기 위해 적어둬야짓🥹

 

+) 위와 같이 수정해도 되고, 아니면 코드가 별로 안예쁘니까 처음부터 불러올때

setData(statsData.data);
setGreetingCards(greetingCardData.data);

이런식으로 .data를 불러서 넣어줘도 된다!