리액트 프로젝트에 외부 API 적용하기 (TheMOVIE DB API)

 

https://www.themoviedb.org/ 

The Movie Database (TMDB)

 

먼저 위 사이트 회원 가입을 진행합니다. (개인 API키를 받기위해 필수적으로 가입해야 합니다.)

메인화면

회원 가입 후 로그인후 설정 창으로 이동해 줍니다.

 

설정창에서 API 탭으로 이동 후 DEVELOP 목적으로 API_KEY를 신청해서 V3 auth키를 사용하시면 됩니다.(전 캡쳐 전에 미리 받은 상태라 패스하였습니다.)

 

import React, { useEffect } from "react";

const MainPage = () => {
  const API_URL = "https://api.themoviedb.org/3/";
  const API_KEY = "******************";

  useEffect(() => {
    const MovieData = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
    
    fetch(MovieData)
      .then((response) => response.json())
      .then((response) => console.log("response", response));
  }, []);

  return <div></div>;
};

export default MainPage;

 

 

위의 코드에서 처럼 설정에서 가져온 API_KEY를 변수에 저장하여 사용합니다.

 

그리고 fetch() 함수를 이용해 받아온 response 데이터를 json() 함수를 통해 변환 시킨 후 

 

console.log 를 통해 확인해 보면 아래와 같은 데이터가 넘어옴을 확인 할 수 있습니다.

 

 

물론 한글 데이터를 받아오고 싶다면 위의 코드에서 en-US 가 아닌 ko_KR 를 입력하면 됩니다.

 

이렇게 받아온 데이터를 사용해 화면에 뿌려주면 API 연결 성공입니다!