React 로 Youtube api 연동하기

Youtube api key 생성하기

 

https://developers.google.com/youtube/v3

YouTube Data API  |  Google Developers

 

 

 

 

Getstarted 를 누르신다음 Goole Developer console 에 들어 오신다음

 

 

 

 

API 및 서비스 사용 설정으로 이동합니다.

 

 

 

Yotubue Data Api v3 를 선택해주세요 

 

 

 

완성 하셨다면 사용자 인증 정보로 들어 오신다음 API key 를 복사해주세요 !

 

 

React 에서 환경변수로 Key 값 사용하기

 

react 에서 .env 파일을 만들어서 환경변수로써 값을 꺼내 사용하기 위해선  REACT_APP_~~ 을 붙여주셔야 해요

 

.env

REACT_APP_YOUTUBE_API_KEY=AIzaSyBayRIlX.......

 

복사해주신 key 값을 리액트 프로젝트 src 폴더와 같은 위치에 .env파일을 만드신뒤 넣어주세요

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';
import reportWebVitals from './reportWebVitals';
import Youtube from './service/youtube';
import axios from 'axios';

const httpClient = axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3',
  params: { key: process.env.REACT_APP_YOUTUBE_API_KEY },
});
const youtube = new Youtube(httpClient);

ReactDOM.render(
  <React.StrictMode>
    <App youtube={youtube} />
  </React.StrictMode>,
  document.getElementById('root'),
);

reportWebVitals();

 

service/yotube.js

class Youtube {
  constructor(httpClient) {
    this.youtube = httpClient;
  }

  async mostPopular() {
    const response = await this.youtube.get('videos', {
      params: {
        part: 'snippet',
        chart: 'mostPopular',
        maxResults: 25,
      },
    });
    return response.data.items;
  }

  async search(query) {
    const response = await this.youtube.get('search', {
      params: {
        part: 'snippet',
        maxResults: 25,
        type: 'video',
        q: query,
      },
    });
    return response.data.items.map((item) => ({
      ...item,
      id: item.id.videoId,
    }));
  }
}

export default Youtube;

 

 

youtube 와 통신 하기 위해  axios 를 사용했습니다.

코드 중복을 막기위해서 create 로 Base Url 을 설정해주었고 위에서 설정한 .env의 api key를 process.env 를 통해서 불러옵니다.

 

testable code를 작성하기위해서 youtube 라는 클래스 만들고 index.js 에서 httpClient를 의존받는 형식으로 로직을 구현했습니다.

 

 

 

src/app.jsx

import React, { useCallback, useEffect, useState } from 'react';
import styles from './app.module.css';
import VideoList from './components/video_list';
import SearchHeader from './components/search_header';
import VideoDetail from './components/video_detail';

function App({ youtube }) {
  const [videos, setVideos] = useState([]);
  const [selectedVideo, setSelectedVideo] = useState(null);

  const selectVideo = (video) => {
    setSelectedVideo(video);
  };

  const search = useCallback(
    (query) => {
      setSelectedVideo(null);
      youtube
        .search(query) //
        .then((videos) => setVideos(videos));
    },
    [youtube],
  );
  useEffect(() => {
    youtube
      .mostPopular() //
      .then((videos) => setVideos(videos));
  }, [youtube]);

  return (
    <div className={styles.app}>
      <SearchHeader onSearch={search} />
      <section className={styles.content}>
        {selectedVideo && (
          <div className={styles.detail}>
            <VideoDetail video={selectedVideo} />
          </div>
        )}
        <div className={styles.list}>
          <VideoList
            videos={videos}
            onVideoClick={selectVideo}
            display={selectedVideo ? 'list' : 'grid'}
          />
        </div>
      </section>
    </div>
  );
}

export default App;

 

처음 localhost:3000 으로 들어오게 되면 useEffect 로 가장 유명한 video 상위 25개를 받아와 리스트 카드로 보여줍니다.

 

search 라는 함수는 검색창에서 검색된 키워드를 쿼리로 유투브 Api를 call 하여 검색된 영상 25개를 보여줍니다.

 

 

 

 

전체코드를 참고하실수 있도록 깃허브 링크를 첨부하겠습니다.

 

https://github.com/JongyunHa/Yuntube

GitHub - JongyunHa/Yuntube