[React/ReactNative] fetch로 api 호출 시 데이터가 undefined일 때 체크해보기!!

평소 프로젝트에서는 react query 라이브러리로 api를 호출하는데

급하게 한 api만 호출해서 데이터가 앱에 제대로 들어오는지 확인하려고

오랜만에 fetch 함수로 스크립트에 쓰려는데, 이상하게도 데이터가 undefined로 뜬다... ㅠㅠ

 

useEffect(() => {
    fetch(url)
      .then((response) => {
        response.json();
      })
      .then((data) => {
      console.log(data)
      })
      .catch((err) => console.log('err :', err));
  }, []);

위와 같은 코드에서, fetch된 데이터를 json()으로 변환해주는 부분에서

중괄호로 감싸게 되어 이후 then절에서 undefined를 반환하게 된 것이었다..

 

useEffect(() => {
    fetch(url)
      .then((response) => response.json()) // <-- 중괄호 제거
      .then((data) => console.log(data))
      .catch((err) => console.log('err :', err));
  }, []);

위와 같이 중괄호 제거 후 로그를 찍어보니 데이터가 정상적으로 들어오는 것을 확인!!

 

매번 (()=>{})를 습관적으로 치다보니..

기본적인것부터 다시 신경쓰도록 하자!!