[Youtube API] 인기 동영상 목록 보여주기(1) - thumbnail 띄우기

우선 유튜브 공식 사이트에서 친절하게 소개가 되어 있으니 참고를 하는 것이 좋은 것 같다. 한글로 번역된 것도 좋긴 하지만 영어 사이트가 source를 만들 수 있는 등 더 많은 것을 이용할 수 있어요!!(물론 postman을 이용해도 코드를 쉽게 작성할 수 있긴 하지만..ㅋㅋㅋ 영문과 한문을 왔다갔다하면서 봤습니다ㅋㅋ.)

유튜브 api 문서 사이트 참고하면서 개발하면 좋습니다.

비디오를 어떤 형식으로 가져오는 지 알 수 있는 링크 → 비디오

가져온 비디오 정보 안에 있는 썸네일이 어떻게 구성되어 있는 지 알 수 있는 링크→ 썸네일






이번 포스팅에서 대략적인 구조는 아래와 같습니다.

App

데이터를 가져오는 데 다양한 방법이 있겠지만 기본적인 방법으로 사용했습니다.

import { useEffect, useState } from 'react';
import './app.css';
import VideoList from './components/video_list/video_list';

function App() {
  const apiKey = process.env.REACT_APP_API_KEY;
  const [videos, setVideos] = useState([]);


  useEffect(() => {
    console.log('useEffect');

    const requestOptions = {
      method: 'GET',
      redirect: 'follow',
    };

    fetch(
      `https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${apiKey}`,
      requestOptions
    )
      .then((response) => response.json()) //반응을 json으로 변환
      .then((result) => {
        setVideos(result.items);
        // console.log(result.items);
      })
      .catch((error) => console.log('error', error));
  }, []);   // 컴포넌트가 업데이트 될 때마다 호출이 되는 것은 안 좋으니 []추가

  return (
    <>
      <VideoList videos={videos} />
    </>
  );
}

export default App;

우선 인기동영상 25개를 가져오기 위해서 경로를

https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${apiKey} 

로 주었습니다.

그리고 비디오 리스트들을 VideoList로 넘겨 주었습니다.

VideoList

import React from 'react';
import VideoItem from '../video_item/video_item';

const VideoList = (props) => (
  <ul>
    {props.videos.map((video) => (
      <VideoItem key={video.id} video={video} />
    ))}
  </ul>
);

export default VideoList;

비디오 리스트들에서 하나씩 값을 빼서 VideoItem에 넣어주었습니다

각각의 비디오는 아래와 같은 정보들을 담고있습니다. 여기서 thumbnails를 사용하겠습니다!

VideoItem

import React from 'react';

const VideoItem = (props) => (
  <li>
    <h1>{props.video.snippet.title}</h1>
    <img src={props.video.snippet.thumbnails.default.url} alt=""></img>
  </li>
);

export default VideoItem;

thumbnails는 이렇게 구성되어 있습니다.

default버전입니다

medium버전입니다

high 버전입니다