[Nomad] ReactJS로 영화 웹 서비스 만들기 4

노마드코더 강의 4일차.

심심해서 만들어보는 React JS 강의 수강

 - ReactJS로 영화 웹 서비스 만들기

  1. 준비물

     > react app 설치 (React JS, React-Dom, Babel)

     > propTypes : npm i prop-types 

npm 플러그인 설치
1. npm install react-router-dom (router 기능)
2. npm i gh-pages (결과물을 github pages에 업로드 할 수 있게 해주는 패키지)

 

 

* 연습

 1. Coin Tracker

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers?limit=5")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        console.log("json = ", json);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (
        <strong>loading.valueOf.apply.</strong>
      ) : (
        <select>
          {coins.map((coin, index) => (
            <option key={index} value={coin.quotes.USD.price}>
              {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      )}
    </div>
  );
}

export default App;

 

2. Movie App 만들기 (BrowserRouter, Routes, Route, useParams 사용)

 - App 내에 구현되어 있던 영화 Component -> Movie.js로 이동

 - Components, routes 폴더 생성

 2.1 App.js 

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; //BrowserRouter = 일반적인 url 생김새, hashRouter = url에 #과 같은 형태가 붙음
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  //이제 App에서는 요청된 url에 따라 해당하는 component를 보여주는 역할을 수행 (=router)
  //한번에 1개의 Router만 렌더링하기 위해 Routes 컴포넌트를 사용함(기존에는 Switch였으나 react-router-dom 버전6에서 Switch->Routes로 변경됨)
  return (
    <Router>
      <Routes>
        <Route path="/hello" element={<h1>Hello</h1>}></Route>
        <Route path="/movie/:id" element={<Detail />}></Route>
        <Route path="/" element={<Home />}></Route>
      </Routes>
    </Router>
  );
}

export default App;

 

 2.2 Home.js 

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

function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const responseJson =
      await //await 내부에 또다른 await 가 있음. awiat는 .then 과 동일한 의미
      (
        await fetch(
          `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
        )
      ).json();
    setMovies(responseJson.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <Movie
              key={movie.id}
              id={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default Home;

 

 2.3 Detail.js 

import { useParams } from "react-router-dom";
import { useEffect } from "react";

function Detail() {
  //Movie의 title 클릭 시 <a href="urlPath">로 상세 페이지로 이동하게 되면 페이지 전체가 다시 실행된다! (=Router의 Link를 사용하는 이유)
  const { id } = useParams();
  const getMovieDetail = async () => {
    const responseJson = await //await는 async 함수 내부에서만 사용이 가능하다.
    (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    // setMovies(responseJson.data.movies);
    // setLoading(false);
    console.log(responseJson);
  };
  useEffect(() => {
    getMovieDetail();
  }, []);
  return (
    <h1>
      [마지막 단계 : 코드 챌린지] - Home에서 해줬던 loading을 Detail에 해주기 -
      movie가 State에 없음. 현재 API에서 json을 받아와서 아무것도 안 하고 있는
      상태. -> 힌트: json을 state에 넣어보기
    </h1>
  );
}

export default Detail;

 

 2.4 Movie.js 

import PropTypes from "prop-types";
import { Link } from "react-router-dom";

function Moive({ id, coverImg, title, summary, genres }) {
  return (
    <div>
      <div>
        <img src={coverImg} alt={title} />
        <h2>
          <Link to={`/movie/${id}`}>{title}</Link>
        </h2>
        <p>{summary}</p>
        {
          //hasOwnProperty("genres") ? ( //genres prop이 있을 때에만 아래 로직 수행 (genres가 없을 시 cannot read properties of undefined 에러 발생)
          genres !== "" ? (
            <ul>
              {genres.map((g) => (
                <li key={g}>{g}</li>
              ))}
            </ul>
          ) : null
        }
        {/*   <ul>
          {genres.map((g) => (
            <li key={g}>{g}</li>
          ))}
        </ul> */}
      </div>
    </div>
  );
}

Moive.propTypes = {
  id: PropTypes.number.isRequired,
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Moive;

 

* 챌린지 : 영화 상세 내용 표시 페이지를 개발해보자!! (강의 다 듣고...)