[React] 유튜브 Data API(v3)를 활용한 비디오 렌더링 - 3

유튜브 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 (
        <VideoListItem 
            onVideoSelect={onVideoSelect}
            key={video.etag} 
            video={video}/>
        )
    })
    return (
        <ul className = "col-md-4 list-group">
            {videoItems}
        </ul>
    )
}

export default VideoList;

• 비디오 리스트 컴포넌트 구조
  • 함수형 컴포넌트
  • 스테이트가 필요없기 때문에 함수형 컴포넌트이다. 비디오 리시트 컴포넌트의 특이한 점은 VideoListItem으로 각 아이템을 보내기 위한 중간 역할을 한다는 것이다.
  • videoItems라는 함수를 리턴문 전에 정의했는데, 이는 전달받은 각 비디오들(배열)을 하나씩 VideoListItem으로 패스하기 위한 것이다. 그래서 map을 사용했으며, 특정 비디오를 셀렉하여 이를 스테이트 업데이트하는 onVideoSelect함수를 패스하고, 각 비디오를 패스했다. (key는 다른 포스팅에서 설명했다)
  • 그리고 리턴문 안에서 videoItems를 리턴하여 위의 기능들을 수행한다. list-group은 리스트 레이아웃을 만들기 위한 부트스트랩 예약어! (부트스트랩 홈페이지)

 

video_list_item.js

import React from 'react'; 

const VideoListItem = ({video, onVideoSelect}) => {
    const imageUrl = video.snippet.thumbnails.default.url;
    return (
        <li onClick ={()=>onVideoSelect(video)} 
            className="list-group-item">
            <div className="video-list media">
                <div className="media-left">
                    <img className="media object" src={imageUrl} />
                </div>
                <div className="media-body">
                        <div className="media-heading">{video.snippet.title}</div>
                </div>
            </div>
        </li>
    )
}

export default VideoListItem; 

• 비디오 리스트 아이템 컴포넌트 구조
  • 리스트에 표시될 각 아이템들의 컴포넌트이다.
  • 부트스트랩 예약어인 list-group-item이 쓰였다.
  • 각 리스트를 클릭하면 그것이 selectedVideo로 업데이트될 수 있도록 이벤트핸들러 onClick ={()=>onVideoSelect(video)} 가 쓰였다.
  • 부트스트랩의 media 예약어가 사용되었다! (부트스트랩 홈페이지)