리액트에서 fetch로 영화데이터 불러오기 비동기처리 promise/ async await 사용

 

영화 데이터를 불러오는 쌩 fetch(ajax)로 불러올때

 

ajax = 비동기통신으로 데이터를 주고받는  기술인 AJAX(서버에 새로고침없이 요청을 할수있게 도와준다. AJAX를 쓰기위해 리액트를 씀. 리액트는 일종의 도구 )

 

둘은 같은 작업을 하는 코드다.

사용법을 익혀보자.

 

1. 프로미스로 then을 받은경우

 useEffect(()=>{
    fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
    .then((res)=>res.json())
    .then((json) => {
    setMovies(json.data.movies)
    setLoading(false)
    })
  },[])

2. async await 사용시

async() => {
    const response = await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
    const json = await response.json()
    setMovies(json.data.movies)
    setLoading(false)

3. async 변수 사용을 더 줄이고싶을때 (2번의 짧은버전)

aync()=>{
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)
}

const getMovies = async() => {
    const response = await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
    const json = await response.json()
    setMovies(json.data.movies)
    setLoading(false)

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