19.12.09 poster img 걸기

파일 구조
/Components/Poster.js
/Routes/Home/HomePresenter.js

Poster.js

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Container = styled.div``;


const Image = styled.div`
    height: 180px;
    background:url(${props => props.bgUrl});
    background-size: cover;
    background-position: center center;
    transition: opacity 0.1s linear;
`;

const ImageContainer = styled.div`
    &:hover{
        ${Image} {
            opacity:0.3;
        }
    }
`;

const Rating = styled.span``;

const Title = styled.span``;

const Year = styled.span``;

const Poster = ({
    id, imageUrl, title, rating, year, isMovie=false
}) => (
    <Link to={isMovie ? `/movie/${id}` : `/show/${id}`}>
        <Container>
        <ImageContainer>
            <Image bgUrl={
                imageUrl ? `https://image.tmdb.org/t/p/w300${imageUrl}` 
                : require("../assets/noPosterSmall.png")
                } />
            <Rating>
            <span role="img" aria-label="rating">
                ⭐️
            </span>{" "}
            {rating}/10
            </Rating>
        </ImageContainer>
        <Title>{title}</Title>
        <Year>{year}</Year>
        </Container>
    </Link>
);

Poster.propTypes = {
    id: PropTypes.number.isRequired,
    imageUrl: PropTypes.string,
    title: PropTypes.string.isRequired,
    rating: PropTypes.number,
    year: PropTypes.string,
    isMovie: PropTypes.bool
};
  
  export default Poster;

• id, imageUrl, title, rating, year, isMovie=false 값을 갖고 있는 Poster 컴포넌트 생성
• 리액트에서 제공하는 Link 태그를 이용해 /movie 와 /show 라우터 분기
• 스타일 컴포넌트로 div를 만들어 포스터 배경 이미지를 css의 background:url로 구현하고 해당 값은 props로 넘겨 받기
• imageUrl 이 없다면 require("../assets/noPosterSmall.png") 로 디폴트 이미지 보여주기

HomePresenter.js

...
import Poster from "../../Components/Poster";
...
const HomePresenter  = ({
    nowPlaying,
    upComing,
    popular,
    error,
    loading
}) => loading ? (
    <Loader />
) : (
    <Container>
        {nowPlaying && nowPlaying.length > 0 && (
            <Section title="Now Playing">
                {nowPlaying.map(movie => (
                    <Poster 
                        key={movie.id} 
                        id={movie.id} 
                        title={movie.original_title} 
                        imageUrl={movie.poster_path} 
                        rating={movie.vote_average}
                        isMovie={true}
                        year={movie.release_date && movie.release_date.substring(0,4)}
                    />
                ))}
                <Poster />
            </Section>
        )}
        ...
     </Container>

• nowPlaying 기준

• HomeContainer.js 에서 정의한 nowPlaying 배열에서 Poster 컴포넌트에 id, original_title, poster_path, vote_average, release_date 값을 map 함수로 부여