[React] 영화 목록 + 검색기능

이번 프로젝트는 어제 공부했던 search bar 기능을 복습할 겸 만들어봤다.

TMDB API를 통해 영화 데이터를 받아오고, 검색창을 추가해 사용자의 검색값에 맞게 해당 목록을 필터링해 주었다.

 

이번엔 저번과 다르게 영어가 아닌 한글로 필터링을 해보았다.

뭔가 훨씬 어렵고 특별한 무언가가 더 필요할 줄 알았는데 아니었다.

---

완성본

---

import styled from 'styled-components';
import { useState } from 'react';
import { InputGroup, Form } from 'react-bootstrap';
// import components
import NowPlayingItems from './../Components/NowPlayingItems';

const NowPlayingContainer = styled.div`
  background-color : #000;
  height : 100vh;
  overflow-y : scroll;
  padding : 12px 0;
  display : grid;
  grid-gap : 8px;
  grid-template-columns : repeat(3, 1fr);
  grid-auto-rows : minmax(240px, auto);
`

const NowPlaying = ({nowPlaying}) => {

  const [search, setSearch] = useState('');

  return(
    <>
      <InputGroup className="mb-3">
        <Form.Control
          placeholder='Search any movie'
          onChange={(e)=>{setSearch(e.target.value)}}
        />
      </InputGroup>
      <NowPlayingContainer>
        {
          nowPlaying.filter((i) => {
            return search.trim() === '' ? i : i.title.trim().includes(search);
          }).map((item,index) => {
            return(
              <NowPlayingItems 
                key={item.id}
                item={item}
                i={index}
                />
            )
          })
        }
      </NowPlayingContainer>
    </>
  )
}

export default NowPlaying;

NowPlaying.js 파일 코드

 

 

코드를 전부 올리기엔 양도 많고 더럽다 ㅠ

어차피 복습 차원에서 새로 만든 프로젝트라 styled-component랑 css를 가지고 논 시간이 더 긴 것 같다.

---

이번엔 tmdb api에서 상영 중인 영화(nowplaying list) 1-5 페이지를 일일이 data.js 파일에 복사 붙여 넣기 하는 중노동을 했다.

다음번엔 axios를 통해 좀 더 슬기롭게 코딩을 할 수 있도록 공부해야겠다.

(아직도 axios와 useEffect의 조합은 에러 지옥이라 너무 어렵다 ㅠ~~)