[React] 오픈 API 활용 : 영화 검색 조회 서비스

영화 정보 제공 API

TMDB 오픈 API 사이트 방문하셔서 가입하면 API키를 발급받을 수 있습니다.

✔️ 영화 검색 API

https://api.themoviedb.org/3/search/movie?api_key=발급받은 키 &query=검색어

✔️ 해당 영화의 비디오 클립 목록 조회 API

https://api.themoviedb.org/3/movie/영화ID/videos?api_key=발급받은 키

✔️ 유튜브 영상 실행

react-youtube 컴포넌트 이용 ➡️ https://www.npmjs.com/package/react-youtube

📦 프로젝트 디렉터리에 react-youtube 패키지 설치

npm install axios react-youtube

MovieList.jsx

영화 목록 컴포넌트
검색어와 일치하는 영화 목록을 가져와서 포스터 이미지, 영화 제목, 시놉시스를 출력

📍 검색어(영화제목) 관리하는 상태변수 title

📍 영화 검색 함수 수정

출력할 영화 변수 추가 movies
검색 여부를 상태 변수에 추가 isSearch

 const [movies, setMovies] = useState([]);
 const [isSearch, setIsSearch] = useState(false);

 const searchMovie = () => {
   		setIsSearch(true);
        const endpoint = `https://api.themoviedb.org/3/search/movie?api_key=API키&query=${title}`
        axios
            .get(endpoint)
            .then(res => {console.log(res)
                         setMovies(res.data.results);
                         })
            .catch(err => console.log(err));
    };

📍 영화 목록 렌더링하기

1️⃣ 검색했으나 결과 없을 때 "일치하는 영화가 존재하지 않습니다." 출력
2️⃣ 검색하지 않았을 때 "검색할 영화 제목을 입력하세요" 출력
3️⃣ 검색 ⭕️, 결과 ⭕️ map 이용해서 영화 리스트 출력

{isSearch && movies.length === 0 && (
        <div>일치하는 영화가 존재하지 않습니다.</div>
      )}
{!isSearch && <div>검색할 영화 제목을 입력하세요</div>}
{movies.length !== 0 && movies.map((m) => (
          <div>
            <div>
              <img src={`https://image.tmdb.org/t/p/w500${m.poster_path}`} />
            </div>
            <div>
              <h1>{m.title}</h1>
              <p>{m.overview}</p>
            </div>
          </div>
        ))}

📍 조회 페이지 실행 결과

MovieDetail.jsx

영화 검색 결과에서 제목을 누르면 비디오 클립 목록을 출력하는 컴포넌트

📍useParams로 파라미터에서 영화 id를 가져옴

// http://localhost:3000/movieDetail/:movieid
const MovieDetail=()=>{
    const params = useParams();
    const movieid = params.movieid;

📍 useEffect로 컴포넌트가 마운트 되었을 때 비디오 클립을 조회하도록 함

  //컴포넌트 화면이 보이고 (마운트되고) 자동으로 데이터를 가져옴 
  useEffect(() => {
    const endpoint = `https://api.themoviedb.org/3/movie/${movieid}/videos?api_key=키`;
    axios
      .get(endpoint)
      .then((res) =>console.log(res));
      .catch((err) => console.log(err));
  }, []);

📍 비디오 조회 수정

출력할 비디오 변수 추가 videos
데이터 로딩 상태 변수에 추가 isLoading

  const [videos, setVideos] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const endpoint = `https://api.themoviedb.org/3/movie/${movieId}/videos?api_key=키`;
    axios
      .get(endpoint)
      .then((res) => {
        console.log(res);
        setVideos(res.data.results);
        setIsLoading(false);
      })
      .catch((err) => console.log(err));
  }, []);

📍 비디오 클립 목록 렌더링하기

1️⃣ 데이터 로딩 중이면 "데이터를 가져오고 있습니다." 출력
2️⃣ 로딩 중 ❌ 비디오 없으면 "등록된 비디오 클립이 존재하지 않습니다." 출력
3️⃣ 로딩 중 ❌, 결과 ⭕️ map 이용해서 비디오 클립 리스트 출력

{
     isLoading && <h1>데이터를 가져오고 있습니다.</h1>
}
{
     !isLoading && videos.length === 0 && <h1>등록된 비디오 클립이 존재하지 않습니다.</h1>
}
{
     !isLoading && videos.length !== 0 && videos.map(v => (
                    <div style={{ fontSize: 20 }}>
                        {v.name} (출시일: {v.published_at.substring(0, 10)})
                    </div>
                ))
}

📍 YouTube 컴포넌트 이용해서 유튜브 영상 보여주기

video 아이디를 키로 넘겨줘야함 ➡️ 키 상태변수가 필요

const [key, setKey] = useState("");

...
...

<div style={{ fontSize: 20 }} onClick={() => setKey(v.key)}>
                            {v.name} (출시일:{v.published_at.substring(0, 10)})
</div>

비디오 제목을 누르면 setKey(v.key) 키 설정

{
    key && <YouTube videoId={key} />
}

📍실행 결과