[React/Trouble-Shooting] Promise의 값 가져오기

TMDB Api를 이용한 React 토이 프로젝트를 진행하다가 문제가 생겼다.
컴포넌트화를 시켜서 생긴 문제인데, Api를 호출하는 부분에서 문제가 생겼다.
옛날 같았으면 App.js에 Api 호출 코드를 전부다 때려박았지만, 컴포넌트화를 해야해서 Api를 다루는 파일을 새로 생성해서, App.js에서 import하는 방식으로 구조를 짰다.

설명을 쉽게 하기 위해서 코드를 가지고 얘기해보자.

먼저, 프로젝트의 구조는 apicall.js에서 Api 호출을 담당한다.
그리고 App.js에서 apicall.js내의 함수를 import하는 구조이다.

---

apicall.js는 다음과 같다.

const TMDB = {
  getPopularMovies: async () => {
      const resp = await fetch(
        `${TMDB_BASE_URL}/popular?api_key=${TMDB_API_KEY}`
      );
      const popularMovies = await resp.json();

      return popularMovies;
  }
}

위 코드는 TMDB API를 호출해서 얻은 json데이터를 return한다.

---

App.js는 다음과 같다.

import TMDB from "./api/apicall"

const [movies, setMovies] = useState([]);

  useEffect(() => {
    const json = TMDB.getPopularMovies();
	setMovies(json);
    console.log(json);
  }, []);

apicall.js의 getPopularMovies()함수를 사용해서 얻은 json 데이터를 movies라는 state에 저장하는 코드이다.

내가 원한 결과는 console.log(json)를 했을 때 영화 목록이 배열로 주르륵 나와야하는데 전혀 읽지를 못했고 콘솔에 아래와 같은 형식이 나타났다.

해결책

구글링으로 여러 블로그를 참고해서, 나는 다음 방식으로 코드를 수정해서 해결했다.

apicall.js

const TMDB = {
  getPopularMovies: async () => {
      const resp = await fetch(
        `${TMDB_BASE_URL}/popular?api_key=${TMDB_API_KEY}`
      );
      const popularMovies = await resp.json();

      return popularMovies.results;
  }
}

위에 첨부한 Promise 결과 사진에서 구조를 파악해보니, Promise객체 안의 results에 원하는 결과가 있었다.
(결과가 있었다뿐이지, App.js를 수정하지 않고 results를 반환하면 해결은 되지 않는다!)

App.js

import TMDB from "./api/apicall"

const [movies, setMovies] = useState([]);

// callType : 호출하는 Api 함수 종류
// setStateType : useState 종류
const promiseHandler = (callType, setStateType) => {
    callType.then((data) => {
      setStateType(data);
    });
};

useEffect(() => {
    promiseHandler(TMDB.getPopularMovies(), setMovies);
  }, []);

callType에는 TMDB.getPopularMovies()가 들어간다.
즉, apicall.js에서 return하는 값이 들어가게 되고, 여기에 then을 붙여서 useState를 호출하면 데이터가 정상적으로 들어감을 확인할 수 있다.

즉, 아래 코드를 추가해보자.
(단, 여기서 console.log()는 이해를 돕기위해 작성한 것 이므로 then 내부의 구조는 원하는대로 바꾸면된다.)

"자신이 호출하고자 하는 함수".then((data) => {
  console.log(data);
});

Promise에 대해 더 알아봐야겠다.