OPEN API 데이터 불러오기 ( fetch )

fetch()

 : url을 입력하면 해당 데이터를 받아오는 함수로서, 인간인지 로봇인지 검사하지 않는 페이지라면

해당 함수로 정보를 받아올 수 있다 ( 검사하는 페이지라면 Selenium 등의 프로그램을 거쳐야한다 )

fetch("URL")

 - 기본적으로 해당 함수를 실행하면 여러가지 데이터들이 넘어온다 ( 기본적으로 페이지와 인터넷 연결이 잘 됬는지 확인하는 코드 )

그래서 해당 페이지의 데이터를 취급하고 싶다면, response에서 json or xml을 추출해야한다

 

 - 예제로 영화진흥위원회의 일별 박스오피스 정보를 가지고 와보자

useEffect(() => {
-> 페이지가 로딩 되자마자 api 데이터를 가지고 오려면 useEffect()를 이용할 수 있다

    fetch(
      `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json
      ?key=31b7b983147a4ed21fe538ba07011d1e&targetDt=20230318`
-> URL의 끝부분인 .json 이후에 ? 를 시작으로 key코드를 입력해서 접근 허가를 받고
&targetDT= 를 입력하는 것으로 API 에서 제공하는 데이터 중 필요한 것들을 선별해서 가져올 수 있다
이 부분은 각 API에서 제공하는 방식에 맞춰서 이용할 수 있다.

      ).then((response) => response.json())
-> 이후에 .then() 함수로 response의 내용을 json으로 가져오고

      .then((json) => {
        setMovies(json.boxOfficeResult.dailyBoxOfficeList);
-> setMovies에 json내부의 내용 중 필요한 것을 넣어서 movie 배열에 저장되게한다.

        setLoading(false);
-> setLoading을 꼭 false로 만들어야한다 그래야 이후에 페이지에 변화가 있어도 로딩을 다시 하지 않는다.
      });
  },[])
  -> 마지막에 [] 을 넣음으로서 페이지가 로딩되고 한번만 데이터를 가져오도록 useEffect를 제어한다

 

---

위의 코드에서 .then을 사용하지 않는 방법이 있다.

astnc() 함수와 await를 이용하는 기능이다. 해당 함수에 대해서는 차후 자세하게 알아보자

   const getMovies = async() => {
   -> getMovies 변수를 async()로 반환한다.
   
     const response = await fetch(
       `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=31b7b983147a4ed21fe538ba07011d1e&targetDt=20230318`
     );
 -> await 를 이용해서 response에 fetch를 저장한다.
 
     const json = await response.json();
 -> await를 이용해서 response를 json으로 가져온다
 
     setMovies(json.boxOfficeResult.dailyBoxOfficeList);
     setLoading(false);
   };
   
   더욱 짧게 쓰려면 response를 스킵할 수도 있다.
   
   const getMovies = async() => {
    const json = await (
      await fetch(
      `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=31b7b983147a4ed21fe538ba07011d1e&targetDt=20230318`
    )).json();
    console.log(json)
    setMovies(json.boxOfficeResult.dailyBoxOfficeList);
    setLoading(false);
  };
  
  위의 두 가지 방법을 사용한다면,
  useEffect 내부에 getMovies()를 한번 실행하는 것으로 충분하다