[React] async() 사용하기

학습일 : 2023. 03. 19

---

 

<App.js>

useEffect 안에서 fetch 시 사용했던

.then 보다는

async() 를 더 자주사용한다고 한다.

 

 

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.5&sort_by=year`
    )
      .then((response) => response.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);

  console.log(movies);

  return <div>{loading ? <h3>로딩 중...</h3> : null}</div>;
}

export default App;

 

 

async()를 사용하여 작성하는 방법은 아래와 같다.

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

위와 아래는 결과는 같지만 위의 코드를

더 많이 쓴다고 함.

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

 

 

---

 

전체 코드

 

다시한번 key를 주는걸 연습해보았다.

key는 unique 여야 하므로

영화마다 고유한 id가 있기 때문에

movie.id 로 key를 주었다.

 

getMovies를 정의해주고

이걸 한번만 불러올 것이기 때문에

useEffect를 사용해서 getMovies를 호출해주고 빈배열을 넘겨주었다.

 

로딩중일땐 로딩중이라는 문구가 출력되고

로딩이 끝났으면

영화 정보(아래 코드에선 영화의 제목) 이 뜰 수 있게 하였다.

 

 

import { useEffect, useState } from "react";
import styles from "./App.module.css";

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.5&sort_by=year`
      )
    ).json();

    setMovies(json.data.movies);
    setLoading(false);
  };

  // useEffect를 이용하여 getMovies를 호출
  useEffect(() => {
    getMovies();
  }, []);

  return (
    <div>
      {loading ? (
        <h3>로딩 중...</h3>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <h2>{movie.title}</h2>
            </div> // key는 unique 여야 한다. fetch 사이트에서 보면 영화마다 고유한 id가 있기 때문에 그걸 가져다 쓸거임.
          ))}
        </div>
      )}
    </div>
  );

 
}

export default App;

 

 

실행결과