Persistence

유튜브 Data API(v3)를 활용한 비디오 렌더링 video_list.js import React from 'react'; import VideoListItem from './video_list_item'; const VideoList = ({videos, onVideoSelect}) => { const videoItems = videos.map((video) => { return ( ) }) return ( {videoItems} ) } export default VideoList; 비디오 리스트 컴포넌트 구조 함수형 컴포넌트 스테이트가 필요없기 때문에 함수형 컴포넌트이다. 비디오 리시트 컴포넌트의 특이한 점은 VideoListItem으로 각 아이템을 보내기 위한 중간 역할을 한다는 것이다. vid..

유튜브 Data API(v3)를 활용한 비디오 렌더링 search_bar.js import React, {Component} from 'react'; class SearchBar extends Component { constructor(props) { super(props); this.state = { term: '' } } render() { return ( this.onInputChange(event.target.value)} /> ) } onInputChange(term) { this.setState({term}); this.props.onSearchTermChange(term); } } export default SearchBar; 서치바 컴포넌트 구조 클래스 컴포넌트 - 사용자가 search한 ..