[REACT Youtube API 사용하기] 2 :: axios로 Youtube API의 데이터 뽑아오기

Youtube API를 사용해 데이터를 뽑아오는 과정은 다음과 같다

1. Youtube API KEY 발급받기 (사전준비)
2. params 설정
3. url에 연결 (get)
4. 출력된 data속에서 필요한 정보만 골라오기

기본적으로 데이터를 가져오는 원리는 GET방식으로 url뒤에 파라미터를 붙여 필요한 정보를 조회하는 것이다.

https://www.googleapis.com/youtube/v3/search?

그래서 위와 같은 주소 뒤에 조건들을 주룰룩 붙여서 통신하면 되는 아주 간단한 것이다!!

조건들은 Youtube API 공식문서에서 필요한 것만 골라서 쓰면된다.

 

Params

가장 기본적으로 쓰이는 파라미터들을 정리해보면 다음과 같다.

 

○ key(필수) : string;

- 발급받은 키

○ part : string;

- videoid => 영상 ID

- snippet => 관련된 영상들

○ maxResults :  number;

- 영상 불러오는 최대 개수

○ q : string;

- 검색어

○ type : string;

- 'video'로 설정해줘야 영상을 찾아낼 수 있음

○ videoDuration : string;

- 길이 ( long : 20분이상 )

 

위에서 설정한 값들을 하나하나 정성스럽게 직접 url에 적어도 되지만... 이하생략..ㅎㅎ

객체에 담아서 사용해줄 것이다! :)

const params ={
    key:/*발급받은 API KEY*/,
    part:'snippet',
    q:{category},
    maxResults: 5,
    type: 'video',
    videoDuration: 'long'
  }

 

GET API를 호출하는 방법으로 두가지가 있다.

params를 URL에 넣는 방법, 따로 parmas를 추가하는 방법 필요한 방법 중

먼저 사용했던 방법은 for문으로 객체를 돌려 url에 하나하나 넣어주는 방법이었다.

  let url = 'https://www.googleapis.com/youtube/v3/search?';
  for (var param in params){
    url += param+"="+params[param]+"&";
  }
  url = url.substr(0, url.length-1);
  
  ...
  
      const response = await axios.get(url);  
   
  ...

이런식으로 params객체의 값을 하나하나 = 과 &을 붙여서 넣어준후 가장 마지막 &를 잘라주는

아~주 별로인 방법이다 ㅎㅎㅎㅎ

암튼 저런식으로 검색을 해도 우선 결과는 나온다!

 

두번째 방법은 GET호출시 params를 넣어주는 것이다.

axios.get(url, {params})

위에서는 url만 넣어서 호출했지만 두번째 파라미터에 params를 넣어주면 알아서 붙는다!

단 주의할점은 객체로 넣어야 한다는 것!

 

+ 또 여기서 한가지 팁은 axios.defaults.baseURL을 활용하는 것이다!

const [params, setParams] = useState({
    part: 'snippet',
    q: `${keyword}노래모음`,
    maxResults: 20,
    type: 'video',
    videoDuration: 'long'
  });
  
  ...
    axios.get('https://www.googleapis.com/youtube/v3/search', { params })

이것없이 url을 그냥 넣어도 물론 좋지만

아무래도 코드가 길어지니까..!

 

axios.defaults.baseURL = 'https://www.googleapis.com/youtube/v3';

axios.defaults.baseURL로 기본 URL을 설정해두고

axios.get('/search', { params })

뒤에 더 붙여야하는 URL만 호출시 적어주는 것이다.

이렇게 하면 search외에 다른 것도 편리하게 사용할 수 있을 것이다!

 

 

카테고리가 아닌 메뉴버튼을 눌렀을 때 영상이 뜨는 오류?

 

초기세팅 > show, hide없이 버튼만 누르면 됐는데

메뉴버튼이 생기면서 상태값에 변화가 생김! 이게 문제이지 않을까?

useEffect를 사용해서 keyword가 변하면 trigger

==> 메뉴버튼을 누름으로써 어떠한 변화가 생김 > 영상을 누르지 않아도 통신이 되면서 엉뚱한 영상출력

 

해결>> axios통신을 함수로 감싸고 키워드 클릭시에 호출 + useCallback을 씌워주었다!

const findLink = useCallback(() => {
    axios.get('/search', { params })
    .then((response) => {
      console.log(response);
      if (!response) {
        setError('검색된 영상이 없습니다.');
        return;
      }
      const itemRandom = Math.floor(Math.random() * 20);
      console.log(response.data.items[itemRandom]);
      // setState(response.data.items[itemRandom]);
      dispatch(addPlaylistRequest(response.data.items[itemRandom]));
    })
    .catch((err) => {
      console.log(err);
    });
  }, [params, dispatch]);

  const changeKeyword = (keyword) => {
    setParams({ ...params, q: `${keyword} 노래모음` });
    findLink();
  };

 

출력된 결과 속 필요한 데이터

위와 같은 방법으로 데이터를 검색하면 이런 결과를 얻을 수 있다.

 

내가 여기서 필요한 데이터는 영상ID, 영상제목, 영상설명, 썸네일정도이다!

각 값들을 다음처럼 뽑아와서 필요한 부분에서 사용하면 된다 :)

 

영상ID :: item.id.videoId
영상제목 item.snippet.title
영상설명 item.snippet.description
썸네일 item.snippet.thumbnails.medium.url