fetch api 사용해보기-데이터 불러오기

비디오의 popular 목록 api를 이용해 보여줘 보겠습니다 

먼저 간단하게 제목을 가져와 보겠습니다

<app.js>

import React, { useEffect, useState } from 'react';
import './App.css';
import VideoList from './component/video_list/video_list';


function App() {
  const [videos, setVideos] = useState([]);
  console.log(videos)
  useEffect(()=>{
    const requestOptions = {
      method: 'GET',
      redirect: 'follow'
    };
    
    fetch("https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=AIzaSyAzZLkdsdKDNayq4Txz0z5wE4jeFCH55N0%20", requestOptions)
      .then(response => response.json())
      .then(result =>setVideos(result.items))
      .catch(error => console.log('error', error));
  },[])

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

export default App;

<videolist.js>

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;

<videoitems.js>

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;

<axios로 바꿔보자>