이전 코로나 현황 사이트는 다소 밋밋하고 API에서 Recovered를 제공하지 않게 되면서 값을 가져오지 못하는 치명적인 단점이 있었다.
질병관리청에도 해당 데이터가 나와있지 않는것으로 보아 완치자 통계는 집계하는데에 한계가 분명하여 이제 어느곳에서도 제공하지 않는듯 하다.
recoverd 카드만 제거하여도 되지만 아예 개선된 버전을 새로 만들고자 한다.

새로운 API

이번에는
https://disease.sh/v3/covid-19
에서 제공하는 API를 사용할 예정이다.

사전준비 - UI구성

먼저 진행할 프로젝트의 UI구성을 대충 설계하자.

대략 이런 형식의 구성을 생각하고 있다.
구성 요소로는 타이틀, 옵션박스, 카드섹션, 지도, 사이드섹션, 차트 정도 되겠다.

사전준비 - 코드

먼저 위 API에서는 각 국가별 데이터를
https://disease.sh/v3/covid-19/countries
에서 제공해주고 있다.

먼저 index.js에 필요한 것들을 import하고 최종적으로 완성할 App을 미리 렌더링해주자

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

그리고 App.js에는 미리

function App() {

  return (
    <div className="app">
      {/*Header*/}
      {/*Title + Select input dropdown menu*/}

      {/*Infobox*/}
      {/*Infobox*/}
      {/*Infobox*/}

      {/*Table*/}
      {/*Graph*/}

      {/*Map*/}
    </div>
  );
}

export default App;

틀을 미리 잡아두자.

각 국가명 드롭다운 옵션박스

이전 프로젝트에서도 진행한 각 국가명을 드롭다운 박스에 나타내주는 과정이다.
이번에는 api파일에서 따로 데이터를 처리하지 않고 바로 받아와서 처리해보자.

function App() {
  const [countires, setCountires] = useState([]);
  const [country, setCountry] = useState("worldwide");

먼저 useState로 각 국가명과 setter함수를 설정해주고 기본값으로는 전세계인 worldwide를 설정해주었다.

그 다음

  useEffect(() => {
    const getCountiresData = async () => {
      await fetch("https://disease.sh/v3/covid-19/countries")
        .then((response) => response.json())
        .then((data) => {
          const countires = data.map((country) => ({
            name: country.country,
            value: country.countryInfo.iso2,
          }));
          setCountires(countires);
        });
    };
    getCountiresData();
  }, []);

useEffect로 getCountriesData를 비동기 함수로 선언하고 api에서 데이터를 받아와 map메소드로 각 나라의 이름과 약어(ex.KR)를 가져왔다.

이제 return값으로

      <div className="app__header">
        <h1>COVID-19 TRACER</h1>
        <FormControl className="app__dropdown">
          <Select variant="outlined" onChange={onCountryChange} value={country}>
            <MenuItem value="worldwide">Worldwide</MenuItem>
            {countires.map((country) => (
              <MenuItem value={country.value}>{country.name}</MenuItem>
            ))}
          </Select>
        </FormControl>
      </div>

Header와 Title+Dropdown 메뉴를 넣어주고 간단한 디자인을 적용하자.

실행결과