[리액트/노드 기초] 영화 사이트 만들기 (3) - Grid Cards 컴포넌트 만들기

이번 글에서는 Grid Cards 컴포넌트를 만들어보겠습니다.

Grid Cards 만들기

Grid Component는 기본적으로 ant design을 이용하겠습니다.

기본적으로 Row 컴포넌트 안에 Col 컴포넌트를 넣어주면 되고, 여기에서는 Col 컴포넌트를 이용해 GridCards 컴포넌트를 만들어주겠습니다.

 

관련된 내용은 아래에서 확인할 수 있습니다.

https://ant.design/components/grid/

Grid - Ant Design

 

우선 src/components/views/commons에 GridCards.js를 만들고 아래와 같은 코드를 작성해줍니다.

LandingPage가 아닌 commons에 만들어주는 이유는 다른 페이지에서 재사용할 수도 있기 때문입니다.

// src/components/views/commons/GridCards.js

import React, { useEffect } from "react";
import { Col } from "antd";

export default function GridCards(props) {
  useEffect(() => {
    console.log(props);
  }, []);
  return (
    <Col lg={6} md={8} xs={24}>
      <div style={{ position: "relative" }}>
        <a href={`/movie/${props.movieId}`}>
          <img
            src={props.image}
            alt={props.movieTitle}
            style={{ width: "100%", height: "320px" }}
          />
        </a>
      </div>
    </Col>
  );
}

 

이 때 props로 image 주소와 movieTitle, movieId를 받아와 활용해줍니다.

다음으로 LandingPage에서 map 함수를 통해 movies state의 요소 각각을 이용해 GridCards 컴포넌트를 만들어줍니다.

<Row gutter={[16, 16]}>
	{movies &&
    movies.map((movie, index) => {
      return (
			  <React.Fragment key={index}>
          <GridCards
            image={
              movie.poster_path
                ? `${IMAGE_BASE_URL}w500${movie.poster_path}`
                : null
            }
            movieId={movie.id}
            movieTitle={movie.original_title}
          />
        </React.Fragment>
      );
    })}
</Row>

movie 정보에 poster_path가 존재하지 않을 수도 있으므로 오류가 나지 않도록 ? 연산자를 사용해줍니다.

만약 poster_path가 존재하면 그 것을 이용해 image url을 만든 후 props로 전달합니다.

또, Fragment를 사용한 이유는 React Fragment 를 참고하면 됩니다.

 

LandingPage의 전체 리턴값은 다음과 같습니다.

return (
  <div style={{ width: "100%", margin: "0" }}>
    {mainMovie && (
      <MainImage
        image={`${IMAGE_BASE_URL}w1280${mainMovie.backdrop_path}`}
        title={mainMovie.original_title}
        description={mainMovie.overview}
      />
    )}

    <div style={{ width: "85%", margin: "1rem auto" }}>
      <h2>Movies by latest</h2>
      <hr />
      <Row gutter={[16, 16]}>
        {movies &&
          movies.map((movie, index) => {
            return (
              <React.Fragment key={index}>
                <GridCards
                  image={
                    movie.poster_path
                      ? `${IMAGE_BASE_URL}w500${movie.poster_path}`
                      : null
                  }
                  movieId={movie.id}
                  movieTitle={movie.original_title}
                />
              </React.Fragment>
            );
          })}
      </Row>
    </div>

    <div style={{ display: "flex", justifyContent: "center" }}>
      <button>Load more</button>
    </div>
  </div>
);

다음 포스팅에서는 load more 버튼의 기능을 구현해보도록 하겠습니다.

 

*본 포스팅은 인프런의 [따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기]를 참고하여 만들었습니다.

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%98%81%ED%99%94%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기 - 인프런 | 강의