리액트5주차

가비·2022년 8월 17일

공부로그

목록 보기

9/14

📌 Movie App 만들기

import { useEffect, useState } from "react"

function App () {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    fetch('https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year'
    )
    .then(response => response.json())
    .then((json) => {
      setMovies(json.data.movies);
      setLoading(false);
    });
  },[])
  console.log(movies)
  return <div>{loading ? <h1>Loading...</h1> : null}</div>;
}

export default App;

요새 저 then을 안쓰고 async-await을 쓴다고 한다.

import { useEffect, useState } from "react"

function App () {
  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.8&sort_by=year'
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies()
  
  },[]);
  console.log(movies)
  return <div>{loading ? <h1>Loading...</h1> : null}</div>;
}

export default App;

좀 더 간단하게 하면

import { useEffect, useState } from "react"

function App () {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async() => {
    const json = await (
      await fetch(
      'https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year'
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies()
  
  },[]);
  console.log(movies)
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div> 
          영화 array에서 각각의 영화에 적용
          {movies.map(movie => (
          <div key = {movie.id}>
            <img src={movie.medium_cover_image} />
            <h2>{movie.title}</h2>
            <p>{movie.summary}</p>
            <ul>
              장르는 array여서 map한번 더 해줘야함 고유값으로 key설정 필수
              {movie.genres.map((g) => (
                <li key={g}>{g}</li>
              ))} 
            </ul>
          </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

🔑 Router 사용하기

Router를 통해 진짜 웹페이지처럼 클릭해서 이동할 수 있다.
hash router는 url이 이해가 힘들어서 browser router를 추천한다.
태그 안에 href=넣어서 링크를 걸면 재실행 되기 때문에 router의 link를 사용하는 것이 좋다.
화면 갱신이 안되는 문제가 있었는데, index.js에서 strictmode를 삭제하여주니 해결되었다.

App.js

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


function App () {
  return (
    <Router>
      <Switch>
        <Route path="/hello">
          <h1>Hello</h1>
        </Route>
        <Route path="/movie/:id">
          <Detail /> 
        </Route>
        <Route path="/"> 
          <Home /> 
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Movie.js

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

function Movie({id, coverImg, title, summary, genres}) {
    return (
      <div>
        <img src={coverImg} alt={title}/>
        <h2>
        <Link to ={`/movie/${id}`}>{title}</Link>
      </h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
      ))} 
      </ul>
    </div>
    );
}

Movie.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 Movie;

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 json = await (
            await fetch(
                'https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year'
            )
        ).json();
        setMovies(json.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;

Detail.js

import {useEffect} from "react";
import {useParams} from "react-router-dom";
function Detail() {
    const {id} = useParams();
    const getMovie = async () => {
        const json = await ( 
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
        ).json;
    };
    useEffect(() => {
        getMovie();
    }, [])
    return <h1>Detail</h1>;
}
export default Detail;

📌 git에 업로드

git에서 레포지토리 생성하고 push 하는 것은
https://laugh4mile.tistory.com/107
이곳을 참고 했다.
웹사이트 퍼블리싱 하는 것은
packagejson 파일에서 deploy,predeploy,homepage를 추가하면 된다. 좀 기다리면 웹페이지가 뜬다.

{
  "name": "moviewebsite",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://macang15.github.io/moviewebsite"

}