2주차 유튜브 API(3) - 동영상 페이지 만들기

https://youngentry.github.io/week2-youtube-api/

React App

useNavigate 를 이용하여 데이터 같이 보내기

const VideoCard = ({ mockVideo }) => {
  const navigate = useNavigate();
  return (
    <>
      <li onClick={() => navigate(`/video/${mockVideo.id}`, { state: { mockVideo } })} className="video-card">
		...비디오렌더
      </li>
    </>
  );
};

useNavigate를 이용하면 해당 url로 이동시킬 수 있습니다.

이 때 두번째 인자로 객체를 넣어 데이터를 전달할 수 있습니다.

 

onClick={() => navigate(`/video/${mockVideo.id}`, { state: { mockVideo } })}

=> { state: {mockVideo} } 객체를 전달하기

 

 

li를 클릭하여 /video/id 로 이동합니다.

 

=> 이 비디오로 이동해보겠습니다.

 

=> /video/id 로 잘 이동되었습니다.

 

---

useLocation 으로 데이터 읽기

  const {
    state: { mockVideo },
  } = useLocation();
  console.log(mockVideo);

const { state : {mockVideo } } = useLocation() 

=> mockVideo 에 useNavigate로 보낸 데이터가 담깁니다.

 

=> 콘솔 창에 데이터가 잘 출력되었습니다.

 

---

Iframe으로 동영상 보여주기

    <div className="video">
      <iframe 
      id="player" 
      type="text/html" 
      width="100%" 
      height="640" 
      src={`http://www.youtube.com/embed/${mockVideo.id}`} 
      />
      <ul>비디오</ul>
    </div>

=> iframe의 src 에 url을 입력해줍니다. 동영상 주소는 전달받은 데이터의 id로 설정합니다.

 

=> 비디오가 나타납니다.

 

받아온 나머지 데이터도 간단하게 css style을 적용시켜 줍니다.

      <li onClick={() => navigate(`/video/${mockVideo.id}`, { state: { mockVideo } })} className="video-card">
        <img src={`${mockVideo.snippet.thumbnails.medium.url}`} alt="" />
        <div className="info">
          <div className="picture"> </div>
          <div className="text">
            <p className="title">{mockVideo.snippet.title}</p>
            <span className="name">{mockVideo.snippet.channelTitle}</span>
            <div className="other">
              <div className="view">{mockVideo.snippet.view}</div>
              <div className="date">{mockVideo.snippet.publishedAt}</div>
            </div>
          </div>
        </div>
      </li>

=> 제목과 채널 이름을 넣어주니 그럴싸합니다.

---

이렇게 첫번째 과제 완료 했습니다.