[React]YoutubeSearch API 사용 및 state 예시

import React, {Component} from 'react';

import ReactDOM from 'react-dom';

import YoutubeSearch from 'youtube-api-search';

import SearchBar from './component/search_bar';

import VideoList from './component/video_list';

const API_KEY = "AIzaSyCWXQgf9WZ2bADCMhJwccOZsXpivTIxfo8";

class App extends Component {

constructor(props){

super(props)

this.state= { videos : [] };

YoutubeSearch({

key : API_KEY,

검색어 : "surfboards"

},

videos => {

this.setState({ videos })

}

);

}

render(){

return (

<div>

<SearchBar />

<VideoList videos={this.state.videos} />

</div>

);

}

}

ReactDOM.render(<App />, document.querySelector('.container'));

검색을 할 때마다, 영상이 추가되거나 바뀌어야 하므로 class형 컴포넌트로 바꾸었다.

그리고 constructor로 state를 초기화하고

YoutubeSearch라는 API를 사용했다.

이는 함수형이며

객체를 받아 작동함

객체의 첫번째 속성인 key는 API_KEY값을 말함

두번째로 검색어를 입력할 수 있음

그리고

함수에 비디오 데이터를 품는 객체가 있는데,

이를 함수화해서 setState시킴

VideoList컴포넌트를 만들고

이는 videos라는 속성을 가질것임

이 속성은 App컴포넌트안에 속성인 state의 videos라는 속성을 전달할 것

결국

import React from "react";

const VideoList = (props) => {

return (

<ul>

{props.videos.length}

</ul>

)

};

export default VideoList

VideoList에 부모 컴포넌트인 App에서 다룬 Videos의 데이터들이 VideoList에 전달될 수 있게 됨