[리액트] 노마드코더 영화 추천 앱(Movie App) 복습

초보자의 입장에서 적은 내용으로, 틀리거나 정확하지 않을 수 있습니다.

 

[리액트] 노마드코더 영화 추천 앱(Movie App) 복습

공부 기간: 22/03/31 ~ 22/04/01

 

 

1. App.js

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

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="movie/:id" element={<Detail />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

 

2. movie.js

import { Link } from "react-router-dom";

export default function Movie(props) {
  return (
    <div className="box">
      <h3>
        {props.id} {props.title}{" "}
      </h3>
      <img src={props.image} />
      <p>{props.url}</p>
      <p>{props.summary.length > 100 ? props.summary.slice(0,100) + "... more" : props.summary}</p>
      <Link to={`/movie/${props.id}`} style={{ color: "white" }}>
        자세히보기
      </Link>
    </div>
  );
}

 

3. Detail.js

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

export default function Detail() {
  const { id } = useParams();
  // 현재 페이지의 마지막 부분을 id로 받아온다.
  const [movie, setMovie] = useState();
  const [loading, setLoading] = useState(true);
  const getMovie = async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    setMovie(json.data.movie);
    setLoading(false);
  };
  useEffect(getMovie, []);

  return (
    <>
      {loading ? (
        "loading..."
      ) : (
        <div className="box">
          <h1>{movie.title}</h1>
          <div>
            <img src={movie.medium_cover_image}></img>
          </div>
          <div style={{textAlign:"center"}}>rating: {movie.rating} | year:{movie.year} | runtime : {movie.runtime} | genres: {movie.genres.map((genre) => genre+", ")} </div>
          <h5>{movie.description_full}</h5>
        </div>
      )}
    </>
  );
}

 

4. Home.js

import { useState, useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Movie from "../components/movie"

export default function Home() {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch(
      "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year"
    )
      .then((res) => res.json())
      .then((json) => {
        setData(json.data.movies);
        setLoading(false);
      });
  }, []);

  return (
    <div className="allbox">
      {loading
        ? "loading"
        : data.map((item) => (
            <Movie
              key={item.id}
              id={item.id}
              title={item.title}
              image={item.medium_cover_image}
              summary={item.summary}
            />
          ))}
    </div>
  );
}

 

 

비고

이 앱을 만들기 위해 useParams, grid css, async await, react-router 의 개념을 복습해야했다.

처음 배울 땐 리액트 라우터 돔 v5.3 을 통해 배웠으나, v6로 한번 다시 만들어봤다.

 

 

react-router : https://velog.io/@soryeongk/ReactRouterDomV6

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

 

grid css : https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

useParams : https://think0wise.tistory.com/6

react - useParams

 

async await : https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await