[React] API 활용한 영화 웹페이지 만들기 (1)

1. STEP1) 영화 API 가져오기 

https://www.themoviedb.org/

The Movie Database (TMDB)

 

 

TMDB 의 API 를 활용하여 본인 API 를 발급받고, 현재 상영중인 영화 데이터들을 가져왔다.

(이 과정은 생략하도록 하겠당) 

 

발급을 받고 더미데이터로 json 파일로 저장하여 가져오는 방식과, 직접 API 를 입력하여 하나하나 가져오는 방식 중에 나는 후자를 선택하였다.

 

리액트에서는 API 를 가져오는 방식이 fetch 와 axios 가 있는데 나는 여기서 axios 방법을 사용하였다!

(1) 라이브러리 설치

// 라이브러리 설치
npm install axios

 

(2) .env 파일을 만들어서 발급받은 나만의 API 를 넣어주도록 한다.

 

💡. env 파일이란??

웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때  dotenv 패키지 를 통해 환경변수 파일을 외부에 만들어 API_KEY 를 (혹은 다른 중요한 정보가 될 수 있다)! 저장시켜 소스코드 내에 하드코딩하지 않고 사용 할 수 있다.

 

//.env 
REACT_APP_MOVIE_API_KEY='본인API키'

 

(이때 React 에서는 반드시 REACT 로 시작하는 이름을 가져야 한다.) 

 

const Movies = async () => {
      const apiKey = process.env.REACT_APP_MOVIE_API_KEY;
      axios.get('https://api.themoviedb.org/3/movie/now_playing', {
        params: {
          api_key: apiKey,
          language: 'ko',
          page: 1,
          region: 'KR',
        },
      })
      .then(response => {
        setMovies(response.data.results);
      })
    };

    Movies();
  }, []);

 

여기서 파라미터로 전달해준 것들은, TDMB 내의 파라미터들이다.

그리고 여기서 async 를 사용하여 비동기함수로 처리해주었기 때문에, then 을 통해서 promise 를 받는 코드를 짜주었다.

2. STEP2) 전체 코드 

//App.js

import React from 'react';
import MovieList from './movieList';
import './App.css';

function App() {
  return (
    <div className="App">
      <MovieList />
      <footer>
      </footer>
    </div>

  );
}

export default App;

 

 

//movieList.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

const MovieList = () => {
  const [movies, setMovies] = useState([]);

  const AppHeader =()=> {
    return (
        <div className="App-header">
            <h1>Welcome!</h1>
        </div>
    )

  };

  useEffect(() => {
    const Movies = async () => {
      const apiKey = process.env.REACT_APP_MOVIE_API_KEY;
      axios.get('https://api.themoviedb.org/3/movie/now_playing', {
        params: {
          api_key: apiKey,
          language: 'ko',
          page: 1,
          region: 'KR',
        },
      })
      .then(response => {
        setMovies(response.data.results);
      })
    };

    Movies();
  }, []);

  return (
    <div className="back">
        <AppHeader></AppHeader>
      <h2>현재 상영 중인 영화</h2>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {movies.map((movie) => (
          <div key={movie.id} style={{ margin: '10px', width: '200px' }}>
            <img
              src={`https://image.tmdb.org/t/p/w200${movie.poster_path}`}
              alt={movie.title}
              style={{ width: '100%' }}
            />
            <h2>{movie.title}</h2>
            <h3>평점: {movie.vote_average}</h3>
          </div>
        ))}

      </div>
    </div>
  );
};

export default MovieList;

 

 

이렇게 API 를 호출하여 웹페이지를 만드는 것까진 완성되었다. 이번엔 한페이지말고 여러페이지를 가져오는 코드를 짜보도록 하자!

 

3. STEP3) 여러 페이지만큼 영화 가져오기

 

페이지별로 잘 가져와진다 ㅎㅎ

그런데 문제가 생겼다! 

데이터가 없어서 4페이지부터는 아무것도 출력이되지않았다...으앗

그래서 10페이지라고 지정해주지 말고, 데이터의 갯수만큼 가져와서 데이터의 갯수만큼 페이지를 만들고 출력하는 코드를 짜보도록 하겠다

 

4. STEP4) 데이터의 갯수만큼 페이지 만들고 영화 리스트 출력하기

일단 위의 코드에서 

page=1 로 만들어놓았던 파라미터를 기억해보자

 

그 부분을 건드리면 될 것 같다

 

Step 3에서 수정했던 것도 합쳐서 설명해보도록 하자.

 

(1) 한 페이지가 아니라 여러 페이지 이므로 페이지별 상태를 따로 또 만들어줘야한다.

// 페이지 전환을 위한 상태 만들기

const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);

 

따라서 페이지 전환을 위하여 현재페이지, 넘어갈 페이지 등의 상태를 지정해준다.

 

(2) hook

useEffect(() => {
  const Movies = async (page) => {
    const apiKey = process.env.REACT_APP_MOVIE_API_KEY;
    const response = await axios.get('https://api.themoviedb.org/3/movie/now_playing', {
      params: {
        api_key: apiKey,
        language: 'ko',
        page: page,
        region: 'KR',
      },
    });
    setMovies(response.data.results);
    setTotalPages(response.data.total_pages);
  };

  Movies(currentPage);
}, [currentPage]);

 

📌여기서 Movies 함수는 처리할 때 page 함수를 인자로 받아서 사용하게 된다.

왜냐하면 나는 여기서 1페이지를 넘어갔을 때, 2페이지가 넘어갔을 때 이런 식으로 페이지별로 다른 api 를 불러올 것이기 때문에 api 를 가져오는 함수가 page 에 따라 다르게 구성되어야 한다.

그래서 page 를 인자로 받는 함수를 만들었당

 

📌그리고 아까는 page = 1 로 가져왔었는데 page = page 로 페이지별로 구성하도록 두었다.

 

📌  의존성 배열은 [currentPage]으로 설정해주었다. currentPage가 변경될 때마다 useEffect 내부의 Movies 함수가 다시 실행되도록 하고, 결과적으로, currentPage가 변경되면 해당 페이지의 영화를 새로 가져올 수 있다.

 

이렇게 하면 사용자가 페이지를 변경할 때마다 새로운 페이지의 영화 데이터를 API로부터 가져와서 movies 상태를 업데이트하고, 총 페이지 수(totalPages)도 업데이트된다.

 

> 결과

 

 

이렇게 하면 데이터만큼 페이지가 생기고, 나머지 페이지는 생기지 않는 것을 확인할 수 있다.