react youtube-clone 비디오 선택 & 상세화면

우리가 비디오를 선택 하게 되면, 선택되는 비디오를 기억했다가

선택되는 비디오가 있으면 비디오에 관련된 정보를 보여줘야 한다.

지금은 선택된 비디오가 없는 null인 상태이고 선택이 되었다면, 비디오를 선택해서 그 정보를 전달해주면 된다.

 

그럼 일단 비디오 컨테이너를 만들어야 한다.

 

app.jsx에 일단 state를 하나 더 생성해서 선택한 비디오의 state를 만든다.

 

const [selectedVideo, setSelectedVideo] = useState(null);

 

이렇게 만들어준다.

 

또 우리가 선택, 상세화면을 만들기 위해서 파일을 추가해 줄 것이다.

 

VideoDetail에는 video를 props로 받아올 것이다.

그리고 간단하게 h1 태그를 이용해서 video.title을 받아온다.

 

app.jsx 에서는 이 디테일 화면을 사용자가 클릭할때만 보여져야 하니까 조건이 필요하다.

 

return (
{selectedVideo && <VideoDetail video={selectedVideo}/>}
)

이렇게 조건문을 줘서 selectedVideo(useState에 있는) 가 있다면, videoDetail을 보여준다 라는 조건을 준다.

 

그리고 우리는 이 videolist가 클릭이 되면, selectVideo로 가는 함수를 만들어야 한다. setSelectedVideo로 video를 업데이트 해주면 된다.

const selectVideo = video => {
	setSelectedVideo(video)
}

이렇게 업데이트 해준다.

이 함수는 VideoList의 onVideoClick으로 props로 전달해준다.

onVideoClick={selectVideo<-아까의 그 함수} 로 해준다.

video_list.jsx 로 가서, 이제 app에서 전달받은 onVideoClick을 props에 전달받아야 한다.

const VideoList = ({ videos, onVideoClick }) 이렇게 destructing 해준다.

 

그리고 VideoItem의 props 에도 전달할 수 있도록 만들어준다.

 

그리고 videoitem으로 가서, onvideoClick을 받아온다.

 

video_item.jsx

이렇게 video를 받아오고, list 자체에 onClick을 준 후, 이 함수가 onVideoClick을 인자값으로 넘겨서 실행할 수 있게 한다.



이렇게 눌렀을 때, 이제 그 비디오의 title이 나오게 된다.

 

이제 정보들을 다 가져오고 css 적인 부분을 하면된다.

styles 적용을 위해 section을 만들고 div로 나누어주어야 한다. 우리가 만들어 준 list 도 옆으로 보여야 하기 때문이다.

 

조건문을 밖에서 해주어야 선택된 것이 없을 때, div 가 보여지지 않고, 있다면 div 자체가 보여지게 해야한다.

 

지금 해야 하는 것은, 이 list가 선택된 것이 없을 때에는 2개로 보여지고, 선택된 것이 있을 때에는 1개로 보여지게 만들어야 한다.

 

그러기 위해서는 display라는 props를 주어서 처리해주어야 한다.

 

1. app.jsx 에서 VideoList 에 props를 display = {selectedVideo ? 'list' : 'grid'} 한다. (선택된 비디오가 있으면 list  아니면 grid 라는 뜻)

 

2.  이 props를 VideoList 에 가져와서 display를 props로 받고, VideoItem으로 다시 넘겨준다.

 

3. 이 props를 VideoItem에 가져와서 다시 display를 props로 받는다.

 

4. 이제 우리는 className 에 이 display를 넣어서 css를 해주면 된다.

 

이런식으로 Video_Item에서 나누어서, styles 작업을 해준다. list 면 styles.list 작업을, 아니라면 styles.grid 작업을

이제 video_list_css 로 가서, grid와 list의 스타일을 적용해준다.

 

그리고 이제 VideoDetail을 진행한다.

 

https://developers.google.com/youtube/youtube_player_demo

YouTube 플레이어 데모  |  YouTube IFrame Player API  |  Google Developers

iframe 으로 유튜브 동영상들을 불러올 수 있다.

이렇게 videoDetail을 작성하면 된다.