4.Landing Page 만들기(2) GridCard Componenet- 영화사이트 만들기

*이번시간에는 4번 GridCardComponent를 만들예정이며 5번 다음시간에 할 예정이다.

 

1. Grid Card Component를 만들기 (client-src-components-views-commons-GirdCards.js)

*LandingPage폴더 내부에 만들지 않는 이유는 그리드카드를 사용할 곳이 LandingPage뿐만 아니라 몇군데 더있기 때문에 상위 폴더에 생성

2. antd Col , Row를 이용하여 GridCard페이지 코딩

import React from 'react';
import { Col } from 'antd';

function GridCards(props) {
  return (
    <Col lg={6} md={8} xs={24}>
      {/*브라우저의 크기가 가장클때는 24중에 6만쓰겠다는의미 중간은 8 가장작을때는 24를 다쓰겠다는의미*/}

      <div style={{ position: 'relative' }}>
        <a href={`/movie/${props.movieId}`}>
          <img
            style={{ width: '100%', height: '320px' }}
            src={props.image}
            alt={props.movieName}
          />
        </a>
      </div>
    </Col>
  );
}

export default GridCards;

3.LandingPage.js에서 GridCards 컴포넌트를 적용

{/*Movie Grid Cards */}
        <Row gutter={[16, 16]}>
          {/*gutter는 Col간의 위 아래여백을 줄때 사용 */}
          {Movies &&
            Movies.map((movie, index) => (
              <React.Fragment key={index}>
                <GridCards
                  image={
                    movie.poster_path
                      ? `${IMAGE_BASE_URL}w500/${movie.poster_path}`
                      : null
                  }
                  movieName={movie.original_title}
                />
              </React.Fragment>
            ))}
        </Row>
      </div>

*여기서 GridCards 컴포넌트를 Fragment가 감싸고 있는 이유는 map메서드를 사용하게 될 시 각요소마다 key값을 부여해야 성능상 에러를 일으키지 않기 때문에 Fragment로 GridCards를 감싸고 Fragment에 key값을 부여하고있다.

 

실행결과

lg사이즈

md사이즈

xs사이즈

*동영상 강의