[React] Movie App - ReactJS 로 영화 웹 서비스 만들기

const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
useEffect(() => {
	fetch(
    	"https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
    )
    .then((response) => response.json())
    .then((json) => {
    	setMovies(json.data.movies);
    	setLoading(false);
    });
}, []);

• useEffect : component가 시작할 때만 실행되는 코드

useEffect(() => {getMovies();}, []);
getMovies : 한 번 작동하는 코드
[] : 어떠한 dependencies 가지지 않음 (빈 배열은 어떤 것도 주시하거나 의존하지 않고 있다는 것을 의미)

 

📌  이전 강의에서는 fetch().then().then()을 사용했으나 오류 발생 시, 어떤 then에서 발생한 건지 확인이 어렵고 가독성이 낮다는 단점이 있음 -> async-await 방식 사용

import { useState, useEffect } 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.5&sort_by=year"
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  }

  useEffect(() => {
    getMovies();
  }, []);

  return (
    <div>
      {
        loading ?
        <h1>Loading...</h1>
        :
        movies.map((movie) => (
          <div key={movie.id}>
            <img src={movie.medium_cover_image} alt={movie.title} />
            <h2>{movie.title}</h2>
            <p>{movie.summary}</p>
            <ul>
              {movie.genres.map((g) => (
                <li key={g}>{g}</li>
              ))}
            </ul>
          </div>
        ))
      }
    </div>
  );
}

export default App;

async-await란? 

비동기 처리를 동기적으로 작동할 수 있게 도와줌

• async : function 앞에 위치, Promise 반환
• await : 비동기 처리된 프로미스 앞에 위치, 비동기 처리가 될 때까지 기다렸다가 반환

 

그 전에 react.js의 장점인 component를 사용하여 코드를 정리해보쟈

App.js (props 보내기)

 <div>
  {
    loading ?
    <h1>Loading...</h1>
    :
    movies.map((movie) => (
     <Movie
      key={movie.id}
      coverImg={movie.medium_cover_image} 
      title={movie.title} 
      summary={movie.setLoading} 
      genres={movie.genres}
    />
    ))}
</div>

🔽 properties를 parent component로부터 정보를 받아옴

Movie.js

function Movie({coverImg, title, summary, genres}){
    return  <div>
    <img src={coverImg} alt={title} />
    <h2>{title}</h2>
    <p>{summary}</p>
    <ul>
      {genres.map((g) => (
        <li key={g}>{g}</li>
      ))}
    </ul>
  </div>
}
export default Movie;​

component가 어떤 props를 가지고 있는지 아는 방법
1. prop-types를 import 해주고 

import PropTypes from "prop-types";

2. component의 PropTypes 설정

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

 

React.js 앱에서 페이지 전환하는 방법 -> React Router

http://localhost:3000 에서 http://localhost:3000/movies/movie.id 페이지로 이동

1. react router 설치

npm install react-router-dom

2. react-router-dom을 사용하기 위해 몇가지 import

 

App.js

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
.
.
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/hello">
          <h1>Hello</h1>
        </Route>
        <Route path="/movie">
          <Detail />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

• Switch : Route(URL) 를 찾고 컴포넌트를 렌더링해줌 

 

3. route별로 분리하기

이제 스크린 단위로 생각해야함 Home/Detail...

유저가 영화 제목을 클릭하면 Detail 스크린으로 가게하고 싶은데

<h2><a href="/movie">{title}</a></h2>

기존에 사용하던 스크립트처럼 a 태그를 넣어서 link를 만들면 링크 클릭 시 화면 전체가 재실행됨 > Link 컴포넌트 사용

 

Movie.js

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

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

• Link : 브라우저 새로고침 없이도 다른 페이지로 이동시켜주는 컴포넌트 (하지만 모든 react router link들이 결국에는 anchor로 바뀜)

 

React Router는 다이나믹(동적) url을 지원해줌 

url에 변수를 넣어줄 수 있음

<Route path="/movie/:id">
	<Detail />
</Route>

 

parameter 값 확인하는 방법 : useParams

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();
    console.log(json);
  };
  useEffect(() => {
    getMovie();
  }, []);
  return <h1>Detail</h1>;
}
export default Detail;