[React] YTS API로 영화 소개 페이지 만들기(1)

YTS Movie api로 영화 소개 페이지를 만들었다. 복습할겸 다시 정리해보려고 한다.

 

React 프로젝트 생성

CRA를 이용하여 프로젝트를 생성했다.

npx create-react-app yts-movie

 

Install React-router-dom, Import

npm i react-router-dom

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

react-router-dom 설치 후 import 해주었다.

노마드코더 강의에서는 react-router-dom V5 로 진행하여 Switch를 사용하는데,

V6 로 업데이트 되면서 Switch 대신 Routes로 바뀌었다.

 

3. 컴포넌트 생성

홈 페이지에서 상세 페이지를 넘어갈 수 있도록 라우터를 설정 하기 전에 컴포넌트를 만들어준다.

라우터에 넣을 컴포넌트로는 Home.js, Detail.js를 생성했다.

 

라우터에 컴포넌트 연결

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './routes/Home';
import Detail from './routes/Detail';

function App() {
  return (
  <Router>
    <Routes>
      <Route basename={process.env.PUBLIC_URL} path='/movie/:id' element={<Detail />} />
    </Routes>
    <Routes>
      <Route path={`${process.env.PUBLIC_URL}/`} element={<Home />}/>
    </Routes>
  </Router>
  )
}

basename, path에 process.env.PUBLIC_URL을 넣은 이유는 나중에 github pages를 문제 없이 사용하기 위해 추가했다.

 

api 연결, loading, Home 컴포넌트 틀 만들기

import {useState, useEffect} from 'react';
import Movie from '../components/Movie';
import LoadingPage from '../components/LoadingPage'

function Home() {
  const [loading, setLoading] = useState(true)
  const [movies, setMovies] = useState('')
  const getMovies = async()=>{
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`)
      const json = await response.json();
      setMovies(json.data.movies)
      setLoading(false)
  }
  useEffect(()=>{
    getMovies();
  },[]);
  
   return (
    <div id='home'>
      {loading ? (<LoadingPage/>) :
      (
      <div id='home-body'>
        <div id="home-title">
          <h1>Movie Information</h1>
        </div>
        <div id='home-movie'>
          {movies.map((movie)=>{
          return <Movie 
            key={movie.id} 
            id={movie.id}
            coverImg={movie.medium_cover_image} 
            title={movie.title} 
            genres={movie.genres}
            rating={movie.rating}
            runtime={movie.runtime}/>
          })}
        </div>

      </div>
      
      )}
    </div>)
}

api에 연결한 뒤, setMovies로 state에 넘기고 Movie 컴포넌트와 Loading 컴포넌트를 생성하고 import 했다.

그리고 삼항연산자를 통해 loading state가 true인 상태에선 Loading 컴포넌트를, false에선 Movie 컴포넌트를 보여주도록 한다.

이 때, Movie 컴포넌트를 map으로 돌리고, api에서 받아온 데이터를 넘겨준다.

 

 

Movie 컴포넌트

import {Link} from 'react-router-dom'

function Movie({id, coverImg, title}){
    return(
    <div key={id}>
      <div id="movie-box">
            <Link to={`/movie/${id}`}>
              <img style={{borderRadius:'10px'}} src={coverImg} alt={title}/>
            </Link>
      </div>
    </div>
    )
}

상세 페이지로 이동을 위해 Link를 import 했다.

Home 컴포넌트에서 넘겨 받은 id, cover image, title만을 사용했다.

Link to에 넘겨 받은 영화의 id를 넣어주어서 상세페이지로 이동할 수 있도록 만들고 커버 이미지를 클릭하면 넘어갈 수 있도록 했다.