[클론코딩] 무비앱 시리즈 #5

#5 Grid Card Component

 

카드 형태로 출력되는 영화 포스터들을 띄워볼 것이다

일단 npm run dev로 리액트 창을 띄워주고 시작했다

 

console.log(response.results)

저번에도 보았듯 한 번에 20개까지 나오는 이 영화들을 각각 카드 형태로 담을 것이다

 

 

1. 필요한 폴더, 파일 생성

이를 위해 commons 폴더를 views 폴더 안에 생성해준다

원래는 LandingPage 안에 생성하려 했으나 카드 형태의 포스터들은 landing page 이외에도 쓰일 것이기 때문에 views 폴더 안에 생성해주었다

그 다음 GridCards.js 파일을 만들어준다

이제 여기서 코드를 작성할 건데, 그 전에 Extensions에 들어가 es7을 다운받아준다

js의 기능을 좀 더 쉽게 작성하게 도와주는 것 같다

 

 

2. GridCards.js 작성, LandingPage.js 수정

다운 받았으면 "rfce"를 타이핑 해보자

react functional component es7

enter를 누르면

이런 식으로 쉽게 functional component를 작성할 수 있다

그럼 본격적으로 코드를 작성해보자

 

GridCards.js

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

function GridCards(props) {
// columm의 size가 24이므로 lg일 땐 4개, md일 땐 3개, xs일 땐 1개만 보인다
  return (
    <Col lg={6} md={8} xs={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

어떤 Card 형식으로 나올 건지 정해준 모습이다

Ant Design(antd)은 중국에서 만든 웹, 앱 디자인 개발을 위한 프레임워크라고 한다

거기서 우리는 'Col'을  import 해와서 쓴 것이다

 

그러면 LandingPage.js도 수정해준다

import GridCards from '../commons/GridCards';
import { Row } from 'antd';

            {/*Movie Grid Cards*/}

            <Row gutter={[16, 16]}>

                {Movies && Movies.map((movie, index) => (
                    <React.Fragment key={index}>
                        <GridCards 
                            image={movie.poster_path ? `${IMAGE_BASE_URL}w500${movie.poster_path}` : null}
                            movieId={movie.id} // 고유의 영화 정보에 들어가기 위해 필요
                            movieName={movie.original_title}
                            
                        />
                    </React.Fragment>
                ))}
            </Row>

큰 포스터는 필요없으니 w500으로 작게 설정해준 모습이다

map형태로 movie와 index를 받아와서 movieId와 movieName을 설정해주었다

이것을 GridCards.js에서 props로 연결해주었다고 보면 된다

Row gutter={[16,16]}에서 gutter은 row의 항목 수를 임의대로 조절하고 싶을 때 사용한다

한 마디로 포스터 사이사이를 띄워주는 여백을 만든 것이다

 

근데,,

강사님과 똑같이 따라했다고 생각했는데

Grid Card가 출력이 되지 않았다,,! ( 아예 텅 빈 화면 )

이게 무슨 일일까,,! 하며 커뮤니티를 뒤져보았다

 

답은 LandingPage.js에 있는 useEffect 코드였다

setMovies([response.results])로 작성이 되어있었는데, 전개 연산자(...)를 사용하여 바꿔줬더니 제대로 출력이 되었다

    useEffect(() => {
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;

        fetch(endpoint) // 인기있는 영화 가져오기
        .then(response => response.json()) // 결괏값 가져오기
        .then(response =>{
            //console.log(response.results)
            setMovies([...Movies, ...response.results]) // setMovies(...[response.results])
            setMainMovieImage(response.results[0])
        } )


    }, [])

setMovies([...Movies, ...response.results])

== setMovies(...[response.results])

== setMovies(response.results)

저 세 코드로 고치면 출력이 잘 된다

 

처음 코드는 setMovies([response.results])였는데, 배열을 두 번이나 감싸줘서 에러가 난 것 같다

전개 연산자는 더 공부해봐야겠다 

검색해보았을 때는 전개 연산자를 쓰면 배열이 2차원이 되는 것을 방지해준다고 한다

배열 안에 배열이 있는 것을 막아준다는 그런 뜻 ,, !!

나중에 더 찾아봐야겠다

 

출력창

미니언즈 ?

잘 됐다

1주 사이에 영화 1등이 바꼈다 신기해

화면을 좁혀도 잘 출력된다

md={8}로 설정해주었기 때문

 

 

강의 2개씩 하려고 했는데 생각보다 힘들다,, 화이띵