예제 생성 참고

https://www.themoviedb.org/documentation/api/discover

이 링크에 들어가면 원하는 데이터를 가져올 수 있는 URL 정보가 안내되어 있다.

영화 정보 불러오기

영화 정보 URL function 만들기

tmdb.js

const TMDB_KEY = process.env.REACT_APP_TMDB_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';
const BASE_LANG = 'ko';
const BASE_REGION = 'KR';

export const getPopularMovies = () => {
  return `${BASE_URL}/movie/popular?api_key=${TMDB_KEY}&language=${BASE_LANG}&region=${BASE_REGION}`;
};

// Images SAMPLE
// https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg
export const getImageUrl = (path, size = 400) => {
  return `https://image.tmdb.org/t/p/w${size}${path}`;
};

(key 노출을 방지하기 위해 .env 파일에 넣어서 사용한다.)

useFecthData 커스텀 훅 만들기

처음엔 영화 정보를 보여줄 컴포넌트 안에 useEffect로 데이터를 가져왔다.
하지만 이후 영화 상세정보 페이지에도 적용해야 하고 여러모로 활용도가 높아서 따로 커스텀 훅을 만들었다.

useFetchData.js

export const STATUS = {
  pending: 'pending',
  resolved: 'resolved',
  error: 'error',
};

const { pending, resolved, error } = STATUS;

const useFetchData = (api) => {
  const [status, setStatus] = useState(pending);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setStatus(pending);
      try {
        const response = await fetch(api);
        const jsonData = await response.json();
        setData(jsonData);
        setStatus(resolved);
      } catch (e) {
        setError(e);
        setStatus(error);
      }
    };

    fetchData(api);
  }, []);

  return [status, data, error];
};

• tmdb.js에서 api 파라미터를 받는다.

영화 정보 불러오기

MovieListPage.js

<ul>
  {data ? (
   data.results.map((movie) => (
     <li key={movie.id}>
       <img src={getImageUrl(movie.poster_path)}
            alt="movie poster"
       />
       <p>{movie.title}</p>
       <p>{movie.vote_average}</p>
	</li>
   ))
  ) : (
  <h1>Loading...</h1>
  )}
</ul>

• map() 함수로 영화 정보를 불러온다.