본문 바로가기

React

[React] 3. fetch

1. fetch

- url으로부터 json object를 받아와서 사용하는것을 fetch라고 한다. 

- fetch를 통해 받아온 object를 useState를 사용하여 저장하고 사용한다. 

- .then 문법을 사용하는 방법 

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

 

- async, await 문법을 사용하는 방법

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); // State에 저장 
    setLoading(false);
  };

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

'React' 카테고리의 다른 글

[ReactHooks] 3. useEffect  (0) 2022.02.03
[ReactHooks] 1. useState  (0) 2022.02.02
[React] 4. Router  (0) 2022.01.29
[React] 1. Create React App  (0) 2022.01.26
[리액트] 정리 5  (0) 2022.01.24