[React] useEffect를 통해 openAPI 가져오기 (Fetch, Axios)(2023.05.26)

🎈 영화 API 불러오기

- fetch, Axios 사용

 

 

import React, { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";

const Ex04 = () => {
  let movieUrl =
    "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230501";

  /**
   * 화면에 영화 랭킹을 띄어주자!
   *
   * jQuery + Ajax >>>>> 논외! (사용추천X 속도 느림)
   * Fecth API (New!)
   * >> 자바스크립트가 제공하는 API
   * >> 별도의 설치를 필요로 하지 않음
   * Axios (New!) >>>>> 대부분 react에서 선호함
   *
   * 공통점 : 네트워크 요청을 위해 사용하는 API
   */

  /* 왜 API를 가지고 오는 것을 useEffect 안에 넣어줄까?
    - useEffect의 순서는 화면이 마운트 된 후!
    - 화면이 먼저 뜨고 데이터를 가지러 감
    - 사용자의 입장에서 조금 더 빠른 환경을 제공
*/

  const [list, setList] = useState([]);

  useEffect(() => {
    // Case 1) Fetch API 사용
    // fetch(movieUrl)
    //   .then((res) => res.json()) //받아온 데이터를 json 형식의 데이터로 반환
    //   .then((res) => {
    //     console.log("fetch res:", res.boxOfficeResult.dailyBoxOfficeList);
    //     //Q.fetch API로 가지고 온 값을 1~10위까지 화면에 띄워주자
    //     //  순위. 영화제목 - 개봉일자
    //     setList(res.boxOfficeResult.dailyBoxOfficeList);
    //   })
    //   .catch(() => {
    //     console.error("error!");
    //   });
    /**
     * Case 2) Axios 라이브러리
     * (1) axios 설치 - npm install axios >> npm i axios
     * (2) import axios from 'axios'
     *
     */

    axios
      .get(movieUrl)
      .then((res) => {
        console.log("Axios res :", res.data.boxOfficeResult.dailyBoxOfficeList); //json으로 넘어옴
        setList(res.data.boxOfficeResult.dailyBoxOfficeList);
      })
      .catch(() => console.error("error!"));

    /**
     * Axios vs Fetch
     * (1) Fetch
     * - 장점
     *    a. js의 내장 라이브러리! 굳이 설치하거나 import할 필요가 없다
     *    b. 내장 라이브러리이기 때문에 업데이트에 영향을 받지 않는다.
     *
     * - 단점
     *    a. 지원하지 않는 브라우저가 존재했었음 (IE11) >> jQuery + Ajax가 흥했던 이유!
     *    b. JSON으로 변환해주는 과정이 필요하다.
     *    c. axios에 비해 기능이 적다.
     *
     * (2) Axios
     * - 장점
     *    a. 기능이 많다.
     *    b. 크로스 브라우징 최적화 (다양한 브라우저 지원)
     * - 단점
     *    a. 설치 필요
     */
  }, []);

  return (
    <div className="container">
      <h1>영화순위</h1>
      {list.map((item) => (
        <p>
          {item.rank} {item.movieNm} - {item.openDt}
        </p>
      ))}
    </div>
  );
};

export default Ex04;

 

🎈 axios로 날씨 API 가져오기

 

 

import React, { useEffect, useState } from "react";
import axios from "axios";
import "./Ex05.css";

const Ex05 = () => {
  /**
   * https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
   * key : d98ae2c3057b1f588501393dc077fc5f
   */

  let cityList = ["gwangju", "seoul", "busan"];

  const [city, setCity] = useState("gwangju");
  const [temp, setTemp] = useState("0");
  const [icon, setIcon] = useState("");
  const [cloud, setCloud] = useState("");

    const getCity = (e)=>{
        setCity(e.target.innerText)
    }

  const getData = () => {
    console.log("get data");
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=d98ae2c3057b1f588501393dc077fc5f`;
    axios.get(url).then((res) => {
      console.log("res :", res.data.weather[0].icon);

      // 온도 세팅 : 켈빈온도 - 273 = 섭씨온도
      setTemp((res.data.main.temp - 273).toFixed(1));

      // 구름 세팅
      if (res.data.clouds.all > 90) {
        setCloud("매우 흐림");
      } else if (res.data.clouds.all > 60) {
        setCloud("흐림");
      } else {
        setCloud("맑음");
      }

      // 아이콘 세팅
      setIcon(
        `https://openweathermap.org/img/wn/${res.data.weather[0].icon}@2x.png`
      );
    });
  };

  /**임시 코드
   *
   * Mission!
   * 버튼을 클릭했을 때 해당 도시로 날씨 데이터가 변경되도록 해보자
   * 1. 버튼을 클릭했을 때 >> getCity라는 함수로 이동 >> city의 이름을 setting
   * 2. city의 이름이 변했을 때, city에 맞는 데이터가 들어오도록
   * 3. 단, 아무것도 클릭하지 않고 단순히 화면이 뜬 상태라면 gwangju의 데이터 받아오기
   *
   */

  useEffect(() => {
    getData();
  }, [city]);

  return (
    <div className="weather-container">
      <div className="weather-item">
        <h1>오늘의 날씨💜</h1>
        <div className="weather-data">
          <img src={icon} width="100px"></img>
          <h1>{temp}℃</h1>
          <h3>{city}</h3>
          <h4>{cloud}</h4>
        </div>

        <div className="button-container">
          {cityList.map((item) => (
            <button onClick={getCity} key={item}>{item}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Ex05;