영화 앱 만들기 -1-

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();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

앞서 우리는 코인 트래커를 만들어보았다.

이번에는 영화 앱을 만들어 보고자 한다.

일단 우리가 앞서 배웠던 fetch 기능을 구현
※ json을 가져온 후 로딩이 끝났기 때문에 반드시 setLoading(false)를 해줘야한다.

근데 아까와는 다르게 못보던것이 보이지 않는가

바로 then 대신에 쓰이는 async-await다.

이게 무엇이냐고? async-await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식은 callBack 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다고 한다.

지금 참고하며 만들고있는 니코의 강의에선 어물적 넘어가더라. 나쁜놈.

웹에서 찾은 기존 문법과 async-await의 차이이다.

기존 Promise 문법
function p() {
	return new Promise((resolve, reject) => {
	    resolve('hello'); 
        // or reject(new Error('error');
	});
}

p().then((n) => console.log(n));

async 문법
async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어준다.
  return 'hello2'; //리턴값은 Promise{<resolved>: "hello2"} 자동 resolve해준다는걸 알 수있다.
  // reject는 throw 에러를 날리면 된다.
}

p2().then((n) => console.log(n));

---

 <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>

다시 돌아와서 코인 트래커와 같이 화면에 영화에 대한 정보를 표시해준다.
앞서 배웠던 map함수를 다시 사용할 시간이다.
map의 argument는 마음대로 정의 할수 있으나 일반적으로 movie라고 쓰니 우리도 무비라고 쓰자.

고유키 값이 필요하여 배열에 있는 movie.id를 넣어줬다.

밑에있는 movie.id / movie.medium_cover_image / movie.title / movie.summary 등은 movies array에 있는 정보들이 변형되어 나온것이다.

마지막으로 장르를 추가 시켜 줄 차례인데 포함되는 장르가 하나가 아닐수도 있어서
li로 리스트를 만들어준다.

여기서 map다시 사용된다. argument이름을 genres의 앞글자인 g로 지정하고 키값도 g로 설정해준다.

단 여기서 g가 고유한 값일 경우에만 가능하다.

---