list item 만들기

side project 진행중인 폴더안에 작업한다.

 

video_item.jsx에서 h1은 필요없기 때문에 지우고 list아이템에서 사용되어지는 VideoItem이기 때문에 li를 사용하고

img 태그에는 props에 있는 video에 있는 snippet에 있는 thumbnails안에 있는 medium을 이용해서 url을 사용한다.

 

메타데이터 정보도 추가를 해줄건데, 스타일링 위해서 div로 묶어주고 p태그를 이용해서 props안에있는 video안에있는

snippet안에 있는 하나는 title이고 하나는 channelTiltle로 들어가게 해준다. 

const VideoItem = ({video}) => (
    <li>
        <img src={snippet.thumbnails.medium.url} 
        alt="video thumbnail"
        />
        <div>
            <p>{snippet.title}</p>
            <p>{snippet.channelTitle}</p>
        </div>
    </li>
);

export default VideoItem;

그리고 위 코드는 video안에 있는 snippet이 반복해서 쓰여지는데 이 코드를 개선하기 위해서는 snippet을 deconstructing해준다.

const VideoItem = ({video : {snippet} }) => (
    <li>
        <img src={video.snippet.thumbnails.medium.url} 
        alt="video thumbnail"
        />
        <div>
            <p>{video.snippet.title}</p>
            <p>{video.snippet.channelTitle}</p>
        </div>
    </li>
);

export default VideoItem;

 

그리고 video_item.jsx파일에서 styles를 import해주고 이미지는 thumbnail로 해주고 className=styles. metadata에서

styles.title과 style.channel을 지정해주다.

import React from 'react';
import styles from './video_item.module.css';


const VideoItem = ({video: {snippet}}) => (
<li className={styles.container}>
    <div className={styles.video}>
        <img
        className={styles.thumbnail}
            src={snippet.thumbnails.medium.url} 
            alt="video thumbnail"
        />
        <div className={styles.metadata}>
            <p className={styles.title}>{snippet.title}</p>
            <p className={styles.channel}>{snippet.channelTitle}</p>
        </div>
    </div>
    
</li>
);
export default VideoItem;

 

CSS 스타일링을 해주기 위해서 video_item.module.css파일을 만들어주고 안에다가 스타일링을 해준다.

.container {
  width: 50%;
  padding: 0.2em;
}

.video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid lightgray;
  box-shadow: 14px 26px 35px -6px rgba(0, 0, 0, 0.53);
  cursor: pointer;
  transition: transform 250ms ease-in;
}

.video:hover {
  transform: scale(1.02);
}

.thumbnail {
  width: 30%;
  height: 100%;
}

.metadata {
  margin-left: 0.5em;
}

.title,
.channel {
  margin: 0;
  font-size: 0.8rem;
}

.channel {
  font-size: 0.7rem;
}

video_list.module.css도 마찬가지로 스타일링 해준다.

.videos {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
}

아래와 같이 lits item을 만들고 스타일링을 해보았다.

list item styling

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)