Card섹션 데이터 받아오기

먼저 데이터를 받아올 API를 살펴보자 앞서
https://disease.sh/v3/covid-19/countries
에서 국가별 데이터를 가져왔는데 해당 API는 위 주소 뒤에 국가별 약어를 붙이면 해당 국가의 데이터를 제공하고 있다
ex.) https://disease.sh/v3/covid-19/countries/KR
또한 전세계 데이터는 https://disease.sh/v3/covid-19/countries 가 아닌 https://disease.sh/v3/covid-19/all 에서 제공하고 있기 때문에 선택된 옵션박스의 값이 worldwide라면 all주소를 사용해야 한다.

이미 이전에 country값이 바뀔때마다 동작하는 onCountryChange함수를 만들어두었으니 이것을 활용하자.

  const [countryInfo, setCountryInfo] = useState({});

각 국가별 데이터를 담을 스테이트를 추가하고
onCountryChange 함수에

    const url =
      countryCode === "worldwide"
        ? "https://disease.sh/v3/covid-19/all"
        : `https://disease.sh/v3/covid-19/countries${countryCode}`;

    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setCountry(countryCode);
        setCountryInfo(data);
      });

    setCountry(countryCode);

countryCode가 worldwide면 all url을 아니라면 각 국가별 코드가 붙은 url을 사용한다고 해주고 setter함수로 데이터를 받아준다.
console.log로 테스트해보면

처음에는 빈 객체를

드롭다운 박스에서 국가를 선택하면 해당 국가의 데이터가 포함된 객체를 받는다.

API마다 제공하는 데이터나 그 형태가 다르기 때문에 이렇게 확인을 해봐야 한다.
이제 데이터를 확인해봤으니 Card섹션에 반영해보자

          <InfoBox
            title="Coronavirus cases"
            cases={countryInfo.todayCases}
            total={countryInfo.cases}
          />

          <InfoBox
            title="Recovered"
            cases={countryInfo.todayRecovered}
            total={countryInfo.recovered}
          />

          <InfoBox
            title="Deaths"
            cases={countryInfo.todayDeaths}
            total={countryInfo.deaths}
          />

InfoBox에 값을 반영해주면 된다.
저장한 뒤 드롭다운 박스에서 국가를 선택해보면

값이 잘 나타난다.
그러나 문제점이 있는데 처음 페이지가 로딩되었을 때 WorldWide에 해당하는 값이 나오질 않는다.

처음 실행하는 useEffect가 비동기로 실행되고 있기 때문인데 useEffect를 하나 더 만들어서 해결하자 처음에는 WorldWide의 값이기 때문에 all url을 fetch해주면 된다.

  useEffect(() => {
    fetch("https://disease.sh/v3/covid-19/all")
    .then(response => response.json())
    .then(data => {
      setCountryInfo(data);
    })
  }, [])

Card섹션 데이터는 이것으로 마무리되었고 다음엔 app__right의 Table을 다뤄보자