React - useEffect에서 데이터 페칭

 

 

useEffect에 직접 async를 주지말자!

 

 

수정 전!

 useEffect(async()=>{
    const Popularmovies = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`);
    const top_rated = await axios.get(`https://api.themoviedb.org/3/movie/top_rated?api_key=${API_KEY}&language=en-US&page=1`);
    console.log(Popularmovies.data.results)
    const movies = Popularmovies.data.results
    const top= top_rated.data.results
   // setmovieInfo([...movieInfo,Popularmovies.data.results])
   setmovieInfo(movies)
   setToprate(top)
  },[])

 

useEffect는 cleanup function 외에는 아무것도 리턴하면 안 되는 것이 원칙인데, async 함수는 기본적으로 항상 promise를 리턴하기 때문이다.

 

수정 후!

 useEffect(()=>{
   get()
  },[])
  
 const get = async()=>{
  const Popularmovies = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`);
  const top_rated = await axios.get(`https://api.themoviedb.org/3/movie/top_rated?api_key=${API_KEY}&language=en-US&page=1`);
  console.log(Popularmovies.data.results)
  const movies = Popularmovies.data.results
  const top= top_rated.data.results
 // setmovieInfo([...movieInfo,Popularmovies.data.results])
 setmovieInfo(movies)
 setToprate(top)
}