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

사이트 : 노마드코더
강의 : ReactJS로 영화 웹 서비스 만들기
시각 : 2022.04.26


◆ 완료한 강의 :

• #7 [2021 UPDATE] PRACTICE MOVIE APP - #7.3 Movie App Part One ~ #7.6 Parameters

1. Free Movie Api

'Fetch' 함수
=> 외부 원격 API를 받아오기 위해 사용하는 함수.
Promise 타입의 객체를 return 함.

호출이 성공하면, 'response(응답)' 객체를 예약
호출이 실패하면, 'error' 객체를 출력
response 객체가 예약되면, api를 .json 파일로 받아서
우리가 이용가능하게 해주는 .json() 메소드가 제공됨

ex:) fetch(
"https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
)
.then((response) => response.json())
.then((aaa) => setMovies(aaa.data.movies));
setLoading(false);
}
(API url을 호출, 호출에 응답(response)하면 response 객체에 .json()이용.
json 파일에 대응하는 argument를 지정하여, setMovies 함수에서 (aaa.data.movies) 같은 식으로 json 파일 객체 속 정보를 꺼내 씀

앞서 해봤던 'ddd.map(() => {})'를 이용하여
영화 DB 사이트의 api를 불러와 필요한 정보만 표시하는 것
웹 개발자들을 위해 영화 사이트들에서 제공하는 DB api.
여기서는 yts.mx 사이트의 DB를 이용
("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year")

{movies.map((aaa) => (<div key={aaa.id}
<img src={aaa.medium_cover_image} /
h2>{aaa.title} ({aaa.year})</h2
p>{aaa.summary}</p
ul> {aaa.genres.map((g) => ( li key={g}>{g}</li ))}</ul </div
※ ㅇㅇ.map 함수의 첫번째 태그에는 반드시 'key'를 지정해줘야함
useState의 movies 값에 저장된 영화 db json에 대응하는
인자를 'aaa'로 지정해서 이하 루트의 필요한 정보들을 나열한 모습

async & await 함수 (비동기 함수)
=> 실행을 '예약'하는 식으로 A 끝나면 B 같은 식의 함수
const 함수명 = async () =>{
const ㅇㅇ = await()}

ex:) const [movies, setMovies] = useState([]);
const getMovies = async () => {
const abc = await (await fetch("https://..d...json")).json();
setMovies(abc.data.movies);
setLoading(false);
}
useEffect(() => {
getMovies();
}, []);

해설:))
1. api에서 정보를 받아 .json파일로 이용하려고 함.
2. 받아온 json 파일은 각 객체가 담긴 array의 형태임.
3. 그래서 useState 기본 값은 빈 array를 지정함.
4. getMovies함수는 async 비동기 함수를 이용.
4-1. getMovies 함수 내, abc 함수는 api url를 fetch하기를 기다리고,
response를 .json()하기를 기다림.
4-2. setMovies로 'abc(최종 받아는 json파일에 대응하는 인자).data.movies)에 있는 값을 Movies에 저장.
4-3. setLoading으로 loading의 값을 false로 만들어 숨겨놓은 자료를 출력
4-4. 위의 getMovies() 함수를 첫 렌더링 때 실행시킴.

App.js 파일 속 코드

import Movie from "./Movie";
// 따로 만든 'Movie.js' 파일을 import.

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=9&sort_by=year"
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };

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

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

// 위에 movies.map 함수를 쓰면서, 외부 'Movie' component를 렌더링함.
자식 component에서 받아오는 props들에 대응하는 자료를 각자 지정해준 모습

export default App;

'Movie.js' 파일 속 코드

function Movie({ title, coverImg, year, summary, genres }) 
// 부모 component 파일에다가 렌더링 할 때 사용할 props들.

{
  return (
    <div>
      <img src={coverImg} />
      <h2>
        {title} ({year})
      </h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

export default Movie;

2. React Router

'React-Router-Dom'을 설치해야 함.

1. 터미널에서 npm i react-router-dom를 입력 후 엔터
2. App.js의 return 이하 내용을 복사
3. 'Routes'라는 폴더를 따로 만들고, 'Home.js'란 파일을 생성
4. Home.js에 1에서 복사한 내용을 붙여넣기
5. App.js에 아래 소스코드를 import
6. url들과 렌더링할 component element를 지정해줌

강의에서 다루는 React-Router-Dom의 component들.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
1. BrowerRouter: '/' url를 만들어줌
2. Routes: /이하 주소를 찾아서 지정한 component와 연결.
3. Route: Routes를 위해서 url & 연결할 component를 작성

'React-Router-Dom' 설치 후 App.js에 import한 모습

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

function App() {
  return (
    <Router>  //  '/' url를 만들어 줌
      <Routes>  //  '/' 이하 주소를 찾아서 지정한 component와 연결
        <Route path="/movie" element={<Detail />}></Route>
        <Route path="/" element={<Home />}></Route>
        // Routes를 위해 /이하 주소와 연결될 component를 지정
      </Routes>
    </Router>
  );
}

export default App;

Movies.js 변경 사항

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

        <Link to="/movie">
          {title}({year})
        </Link>
        
        // html에서는 <a href=""></a>를 씀.
        이것은 페이지를 새로고침하면서 다른 페이지로 이동함.
        그러나, React에서는 <Link to=""></Link>를 씀.
        페이지 새로고침없이 이동만 시켜줌

3. Parameter

연결되는 Detail에서 useParams을 사용하면
:id 에 해당하는 사용된 변수 값을 알려줌.

<Route path="/movie/:id" element={}>
여기서 :id는 변수 이름임. 다른 걸로 바꿔도 무방
-> 이 url이 랜덤 변수를 받을 것이라고 알려주는 것

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

  const { id } = useParams();
  const getMovie = async () => {
    const abc = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    setMovie(abc.data.movie);
    setLoading(false);
    console.log(abc);
  };