React-Youtube : 디테일 비디오 페이지에서 우측 비디오 리스트 생성

안녕하세요. 제이나린 입니다. 오늘은 우측에 있는 사이드 비디오를 만드는 과정을 적어보려고 합니다.

 

1. SideoVideo 템플릿 만들기

먼저 SideVideo 템플릿을 만들기 위해서는 다음과 같은 경로가 필요하다. VideoDetailPage 폴더 안에 Sections라는 폴더를 만든 후 그 안에 SideVideo.js를 만든다.

// src > components > views > VideoDetailPage > Sections > SideVideo.js
import React from "react";

function SideVideo() {
  return (
    <div style={{ display: "flex", marginBottom: "1rem", padding: "0 2rem" }}>
      {/* 이미지 */}
      <div style={{ width: "40%", marginBottom: "1rem" }}>
        <a>
          <img style={{ width: "100%" }} src alt />
        </a>
      </div>
      {/* 이미지에 대한 정보 */}
      <div style={{ width: "50%" }}>
        <a href>
          <span style={{ fontSize: "1rem", color: "black" }}>videoTitle</span>
          <br />
          <span>videoWriterName</span>
          <br />
          <span>videoViews</span>
          <br />
          <span>Time</span>
        </a>
      </div>
    </div>
  );
}

export default SideVideo;

구조를 크게 구별해 보면 다음과 같다.

SideVideo.js 구조

 

보통 유튜브를 보시면 좌측에는 이미지, 우측에는 영상에 대한 정보를 넣듯, 이 수업에서도 기본적인 구조로 진행하였다. 그래서 좌측에는 이미지가 들어갈 부분과 우측에는 정보가 들어간 후 그 전체를 감싸는 div값을 가졌다고 할 수 있다. 그리고 이 js를 VideoDetailPage.js에 import를 해준다.

// src > components > views > VideoDetailPage > VideoDetailPage.js
// 중략
import SideVideo from "./Sections/SideVideo";
function VideoDetailPage(props) {
	// 중략
    return (
    <Row gutter={[16, 16]}>
    	<Col lg={18} xs={24}>
        	<!-- 중략 -->
        </Col>
        <Col lg={6} xs={24}>
        	<SideVideo />
        </Col>
    </Row>
    );
};
export default VideoDetailPage;

상단에 방금 만든 SideVideo를 import를 한 후 Col로 구조를 잡아둔 부분에 태그로 불러준다.

 

2. 디비에서 데이터 불러오기

// src > components > views > VideoDetailPage > Sections > SideVideo.js
import React, { useEffect, useState } from "react";
import Axios from "axios";

function SideVideo() {
  const [sideVideos, setsideVideos] = useState([]);
  useEffect(() => {
    Axios.get("/api/video/getVideos").then((response) => {
      if (response.data.success) {
        console.log(response.data);
        setsideVideos(response.data.videos);
      } else {
        alert("비디오 가져오기를 실패 했습니다.");
      }
    });
  }, []);

  const renderSideVideo = sideVideos.map((video, index) => {
    var minutes = Math.floor(video.duration / 60);
    var seconds = Math.floor(video.duration - minutes * 60);
    return (
      <div
        key={index}
        style={{ display: "flex", marginBottom: "1rem", padding: "0 2rem" }}
      >
        {/* 이미지 */}
        <div style={{ width: "40%", marginRight: "1rem" }}>
          <a href={`/video/${video._id}`}>
            <img
              style={{ width: "100%", height: "100%" }}
              src={`http://localhost:5000/${video.thumbnail}`}
              alt="thumbnail"
            />
          </a>
        </div>
        {/* 이미지에 대한 정보 */}
        <div style={{ width: "50%" }}>
          <a href={`/video/${video._id}`} style={{ color: "gray" }}>
            <span style={{ fontSize: "1rem", color: "black" }}>
              {video.title}
            </span>
            <br />
            <span>{video.writer.name}</span>
            <br />
            <span>{video.views}</span>
            <br />
            <span>
              {minutes} : {seconds}{" "}
            </span>
          </a>
        </div>
      </div>
    );
  });
  return (
    <React.Fragment>
      <div style={{ marginTop: "3rem" }} />
      {renderSideVideo}
    </React.Fragment>
  );
}

export default SideVideo;

먼저 useEffect를 이용하여 비디오에 대한 정보를 가져온다. 그런 다음 사이드에 map함수와 useState를 사용하여 배열 형식으로 데이터를 받아 뿌려준다.

VideoDetailPage.js 화면

이런 화면이 잘 나오면 완성이다.

 

 

 

리액트를 잊지 않기 위해 계속 반복하고 반복을 하여 내 것이 될때 까지

필자는 멈추지 않을 것이다.

언젠간 기업도 이 노력을 알아주기를 바라면서...

 

[ 오늘의 코드 바로가기 ]