221014 메가박스 리액트 - 영화검색(1) TMDB 데이터 받아오기

 

네이버 검색API와 영화진흥위원회 API를 이용하려다 보니 이미지가 작은게 불만이었습니다.

그러던 중 TMDB라는 영화나 드라마 데이터를 제공하는 API를 발견하고 이 API를 통해 영화 검색 기능을 구현하기로 합니다.

우선 영화 데이터를 받아오도록 합니다.

 

---

 

1. TMBD 사이트에 회원가입을 하고 api_key를 발행받습니다.
https://www.themoviedb.org/settings/api

 

---

 

2. 기본 url과 받아온 api_key는 axios instance를 생성하여 설정합니다.

 

const { default: axios } = require("axios");

const url = "https://api.themoviedb.org/3";

const key = "fd372a536c70d731cd668179d6cd16d7";

const instance = axios.create({

    // 기본 url

    baseURL: url,

    // params : URL 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)

    params: {

        api_key: key,

    },

});

 

---

 

3. 원하는 데이터 주소를 객체로 만들어 리퀘스트할 url로 저장했습니다. 

const category = {

    trending: "/trending/movie/week",

    genre: "/genre/movie/list",

};

/** genre >>> 0 : {id: 28, name: 'Action'} ~ 18  */

/** trending >>> 0 : {adult: false, backdrop_path: '주소.jpg', poster_path: '주소.jpg', id: 894205, title: '제목', original_language: '언어', genre_ids: '[28,14,27], overview: '줄거리', release_date: '년월일', vote_average: '7.4', vote_count: '321', popularity: '510.713'} ~ 19 */

export { instance, category };

 

---

 

4. state에 API로부터 받아온 데이터를 비동기로 처리해 저장합니다.

 

const App = () => {

    const [trendingItm, setTrendingItm] = useState([]);

    useEffect(() => {

        getTMDB();

    }, []);

    const getTMDB = async () => {

        const res = await instance.get(category.trending);

        const trendingData = res.data.results;

        setTrendingItm(trendingData);

    };

 

---

 

5. 이미지 주소는 https://image.tmdb.org/t/p/w500/ + backdrop_path의 값입니다.

                    {TRENDINGDATA.map((el, idx) => {

                        return (

                            <ul key={idx}>

                                <li>{el.id}</li>

                                <li>{el.title}</li>

                                <li>

                                    <img src={"https://image.tmdb.org/t/p/w500/" + el.backdrop_path} />

                                </li>

                            </ul>

                        );

                    })}