react.js 기본 (노마드 강의) - 실습 - Movie app - 1 (async, await, props, prop-types)

api 연동을 위해 then을 사용 했지만 더 모던한 방식 async, await 가 있다.

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  //async await (모던한 방식 - 짧은 버전)
  const getMovies = async () => {
    const json = await (
      await fetch(
        "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

  //async await (모던한 방식 - 긴버전)
  // 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();
  // }, []);

  // 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);
  //   //   });
  // }, []);

  return (
    <div>
      {loading ? (
        <h1>loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image} alt={"movies cover"} />
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li> //map함수 돌린때 key값은 꼭 명시.(고유한 값)
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

컴포넌트화 해서 App.js를 간결히 한다.(Prop, PropTypes)

• 부모 컴포넌트 정보를 자식 컴포넌트에 전달 할 때는 Prop을 이용한다. 자식 컴포넌트에서는 argument로 해당 데이터를 받을 준비를 한다.

APP.js

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

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  //async await (모던한 방식 - 짧은 버전)
  const getMovies = async () => {
    const json = await (
      await fetch(
        "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

  return (
    <div>
      {loading ? (
        <h1>loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => ( 
            <Movie 
    	//부모 컴포넌트에서 자식 컴포넌트로 정보를 전달 할때는 Prop을 사용한다.
              key={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

Movies.js

import PropTypes from "prop-types";

function Movie({ coverImg, title, summary, genres }) {
  //이 property들은 movie 가 App.js(부모 컴포넌트)로부터 
  //받을 예정인 정보들 - 참고 컬리브레이스는 구조분해할당..
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li> //map함수 돌린때 key값은 꼭 명시.(고유한 값)
        ))}
      </ul>
    </div>
  );
}

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

export default Movie;

구조 분해 할당 ?

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment