useEffect와 Axios를 이용한 영화 API 연동 실습

알고 가야 할 개념

• Mount: 컴포넌트가 브라우저 화면에 처음으로 나타나는 시점
• useEffect: 컴포넌트가 렌더링 될 때마다 특정 작업 수행하도록 설정한 훅이다. 의존성 배열([])을 비우면 마운트 시점에 한번만 실행되므로 API 호출에 적합하다
• Axios: 브라우저와 서버를 위한 HTTP 통신 라이브러리
• Optional Chaining (?.): 데이터가 도착하기 전(undefined)에 객체 속성에 접근해서 발생하는 에러 방지 

---

미리 준비해야 할 작업

1. TMDB 사이트에서 회원가입 후 로그인
   • https://developer.themoviedb.org/reference/intro/getting-started 
2. Developer Plan 작성
   • 로그인 해야 API Token을 받을 수 있는데 이걸 이용해서 서버에 데이터 요청할 수 있다. API 요청하는 페이지에서 아래와 같이 Develop Plan 입력해야 하는데, URL에는 실제 도메인이 없기 때문에 로컬 주소를 적어도 아무런 문제 없이 진행할 수 있다. 

Developer Plan

 3. API 읽기 엑세스 토큰 복사 

• Plan 입력하면 아래와 같이 2개의 API가 뜨는데 둘 중 긴 토큰(위에 꺼) 복사할 것 

API 읽기 액세스 토큰 복사

---

코드 작성 

• API 데이터 타입 정의
  • TypeScript 활용해서 서버에서 받아올 데이터 구조를 미리 정의하였다. 

// src/types/movie.ts
export type Movie = {
    id: number;
    title: string;
    overview: string;
    poster_path: string;
    release_date: string;
    vote_average: number;
};

export type MovieResponse = {
    results: Movie[];
    page: number;
    total_pages: number;
    total_results: number;
};

 

• 영화 목록 페이지 구현
  • axios의 headers에 TMDB에서 발급 받은 API 읽기 엑세스 토큰을 Bearer 방식으로 전달하여 보안 인증을 처리하였다. 

// src/pages/MoviesPage.tsx
import { useEffect, useState } from 'react';
import axios from 'axios';
import type { Movie, MovieResponse } from '../types/movie';

const MoviesPage = () => {
    const [movies, setMovies] = useState<Movie[]>([]);

    useEffect(() => {
        const fetchMovies = async () => {
            try {
                const { data } = await axios.get<MovieResponse>(
                    'https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1',
                    {
                        headers: {
                            Authorization: `Bearer YOUR_TOKEN`,
                            accept: 'application/json',
                        },
                    }
                );
                setMovies(data.results);
            } catch (error) {
                console.error("데이터 로드 실패:", error);
            }
        };
        fetchMovies();
    }, []);

    return (
        <div className="movie-container">
            {movies?.map((movie) => (
                <div key={movie.id} className="movie-card">
                    <img src={`https://image.tmdb.org/t/p/w200${movie.poster_path}`} alt={movie.title} />
                    <h3>{movie.title}</h3>
                </div>
            ))}
        </div>
    );
};

---

결과

브라우저를 실행시키니 정상적으로 영화 목록들이 뜨는 것을 확인하였다. 그리고 개발자 도구 > 콘솔창에서 영화 데이터 20개가 배열 형태로 들어오는 것을 확인했으며, map 함수를 통해 브라우저 화면에 영화 포스터와 제목이 격자 형태로 렌더링되는 것을 확인하였다. 

• 로컬 서버 

• 콘솔 확인