React에서 YouTube API 사용하기

오늘은 React 애플리케이션에서 YouTube API를 통합하는 방법에 대해 배웠습니다. 이는 YouTube의 동영상 콘텐츠가 필요한 많은 웹 애플리케이션에서 필수적인 기능입니다. 제가 배운 내용을 단계별로 정리해보겠습니다.

사전 준비

1. YouTube 데이터 API 키: YouTube API와 상호작용하려면 API 키가 필요합니다. Google Developer Console에서 프로젝트를 생성하고 YouTube 데이터 API v3을 활성화하여 이 키를 얻을 수 있습니다.

2. React 애플리케이션: React 애플리케이션이 설정되어 있어야 합니다. create-react-app을 사용하여 생성할 수 있습니다.

React에서 YouTube API 통합 단계

1. API 키 얻기

• Google Developer Console에 접속합니다.
• 새 프로젝트를 생성합니다.
• API 및 서비스 > 라이브러리로 이동합니다.
• "YouTube Data API v3"을 검색하여 활성화합니다.
• API 및 서비스 > 인증 정보로 이동하여 API 키를 생성합니다.

2. React 애플리케이션 설정

아직 설정하지 않았다면, 다음 명령어를 사용하여 React 애플리케이션을 설정합니다:

npx create-react-app youtube-integration
cd youtube-integration
npm start

3. Axios 설치

HTTP 요청을 보내기 위해 Axios를 사용합니다. 다음 명령어로 설치합니다:

npm install axios

4. API 서비스 생성

YouTube API 요청을 처리할 서비스를 생성합니다. src 디렉토리에 youtubeApi.js 파일을 만듭니다:

import axios from 'axios';

const API_KEY = 'YOUR_API_KEY'; // API 키로 대체하세요
const BASE_URL = 'https://www.googleapis.com/youtube/v3';

const youtubeApi = axios.create({
  baseURL: BASE_URL,
  params: {
    key: API_KEY,
    part: 'snippet',
    maxResults: 5,
  },
});

export const searchVideos = (query) => {
  return youtubeApi.get('/search', {
    params: {
      q: query,
    },
  });
};

5. 검색 컴포넌트 생성

YouTube 동영상을 검색할 수 있는 Search 컴포넌트를 생성합니다:

import React, { useState } from 'react';
import { searchVideos } from './youtubeApi';

const Search = () => {
  const [query, setQuery] = useState('');
  const [videos, setVideos] = useState([]);

  const handleSearch = async (event) => {
    event.preventDefault();
    const response = await searchVideos(query);
    setVideos(response.data.items);
  };

  return (
    <div>
      <form onSubmit={handleSearch}>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search YouTube videos"
        />
        <button type="submit">Search</button>
      </form>
      <div>
        {videos.map((video) => (
          <div key={video.id.videoId}>
            <h3>{video.snippet.title}</h3>
            <p>{video.snippet.description}</p>
            <img src={video.snippet.thumbnails.default.url} alt={video.snippet.title} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Search;

6. App에서 Search 컴포넌트 사용하기

마지막으로, 메인 App 컴포넌트에서 Search 컴포넌트를 사용합니다:

import React from 'react';
import Search from './Search';

function App() {
  return (
    <div className="App">
      <h1>YouTube Video Search</h1>
      <Search />
    </div>
  );
}

export default App;

7. 애플리케이션 실행

다음 명령어를 사용하여 애플리케이션을 시작합니다:

npm start

이제 React 애플리케이션이 YouTube 동영상을 검색하고 결과를 표시할 수 있어야 합니다.

결론

React 애플리케이션에서 YouTube API를 통합하는 과정은 API 키를 얻고, API 서비스를 설정하고, 사용자 입력을 처리하는 컴포넌트를 생성하고, 결과를 표시하는 단계를 포함합니다. 이 기본 설정은 페이지네이션, 상세 동영상 보기, 더 복잡한 검색 옵션 등 추가 기능으로 확장할 수 있습니다.

YouTube 데이터 API를 활용하면 동적 동영상 콘텐츠로 애플리케이션을 풍부하게 만들어 사용자 경험을 향상시킬 수 있습니다.