무비앱 인프런 강의 클론(2)

오늘 만든 것

grid-card

grid 형태를 주기 위해 ant Design의 { Row, Col }을 사용했습니다.

 

먼저 Column의 경우 한 Column에 1-24 값을 입력할 수 있습니다. 

lg (large 사이즈 일 때) 6을 입력하면 같은 너비의 4열,

md (medium 사이즈 일 때) 8 을 입력하면 같은 너비의 3열,

xs (xsmall 사이즈 일 때) 24 를 입력하면 같은 너비의 1열을 의미합니다.

function GridCards(props) {
  return (
    <Col lg={6} md={8} xs={24}>
      ... 생략
    </Col>
  );
}

Row gutter를 통해 grid 간 간격을 조절할 수 있습니다.

값으로는 숫자, 객체, 배열이 올 수 있으며 기본값은 0입니다.

객체 ex) { xs: 8, sm: 16, md: 24}

배열 ex) {[Horizontal Gutter, Vertical Gutter]}

<Row gutter={[16, 16]}>
     ...생략
</Row>

*짜잔*

영화 리스트를 grid card 형태로 줍니다.

Load more Button

버튼을 클릭하면 영화를 추가로 더 보여줍니다.

 <button style={{ cursor: "pointer" }} onClick={loadMoreItems}>
          {" "}
          Load More
</button>

버튼에 onClick 이벤트를 추가해줍니다.

 

기존에 무비 API를 통해 데이터 가져오는 코드는 중복 사용을 하여 fetchMovies라는 함수로 만들어주었습니다.

 

버튼을 클릭 시 page만 이동하여 다음 페이지의 영화들을 가져오면 되기 때문에 page를 위한 state를 만들어줍니다.

가지고 오는 데이터를 보면 page에 대한 프로퍼티도 있습니다.

이를 이용해 버튼을 클릭할 때마다 현재 페이지+1의 영화 정보를 가지고 오면 되겠죠?

그리고 스프레드 문법을 이용하여 현재 Movies에 배열에 새로 가져온 영화 정보를 추가해 주면 됩니다.

const [CurrentPage, setCurrentPage] = useState(0);

const fetchMovies = (endpoint) => {
    fetch(endpoint)
      .then((response) => response.json())
      .then((response) => {
        setMovies([...Movies, ...response.results]);
        setMainMovie(response.results[0]);
        setCurrentPage(response.page);
      });
  };

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

---

기억할 것

ant 디자인 사용방법 - ant Design은 처음 들어보네요. 실제로 검색했을 때 한글 자료도 거의 없는 것 같습니다. 

사용하기는 편해 보이는데 좀 검색해 보니까 다양한 단점들이 보이네요. 단순한 페이지 구현에는 편리하다고 합니다.

Grid - Ant Design

---

막힌 부분

load more button을 클릭할 때 아래 사진처럼 빈 공간이 생겼습니다. 이미지가 없는 영화 정보가 저런 식으로 뜨는 건가 했지만 검사해 보니 그냥 빈 공간이었습니다. 아무리 생각해도 CSS 때문에 발생한 문제 같아 살펴보니 height 문제였습니다.

그리드 카드 img stype 속성에 width만 주었는데 이게 문제였나 봅니다. height에 값으로 주어 해결하였습니다.

미묘하게 height가 작거나 조금 커서 gird 형태가 망가지더라고요.. 그래도 꽤 빨리 해결했습니다.

---