이전 포스팅에 이어 각 국가별 드롭다운 옵션 박스를 만들고 선택한 국가의 데이터를 Bar형태의 차트로 나타내는 작업을 해보자.

BarChart

  const barChart = confirmed ? (
    <Bar
      data={{
        labels: ["Infected", "Recovered", "Deaths"],
        datasets: [
          {
            label: "People",
            backgroundColor: [
              "rgba(0, 0, 255, 0.5)",
              "rgba(0, 255, 0, 0.5)",
              "rgba(255, 0, 0, 0.5)",
            ],
            data: [confirmed.value, recovered.value, deaths.value],
          },
        ],
      }}
      options={{
        legend: { display: false },
        title: { display: true, text: `Current state in ${country}` },
      }}
    />
  ) : null;

  return (
    <div className={styles.container}>{country ? barChart : lineChart}</div>
  );

Bar형태의 차트 사용법 역시 react-chartjs-2의 공식 홈페이지에 잘 나와있다.
이 차트는 일별 데이터를 나타내지 않고 총 누적치만 표시하도록 할 것이므로 dailyData가 아닌 확진자, 완치자, 사망자의 데이터만 가져왔다.

중요한 부분은 아래의 return부분인데 뒤에 알아볼 드롭다운 옵션박스의 값이 선택되어있으면 Bar형태의 그렇지 않으면 Line형태의 차트를 보여주겠다는 뜻이다.

options의 ${country}는 뒤이어 만들 옵션박스에서 다시 다루자.

CountryPicker

이번에도 material-ui라이브러리에 있는 옵션박스를 사용하자.

import { FormControl, NativeSelect } from "@material-ui/core";

import해야 할 것은 요 두가지.
요것 또한 공식 사이트에 사용법을 알 수 있다.

여기서도 선택한 국가의 값이 바뀔때마다 화면을 다시 렌더링 해줘야하므로 useEffect를 사용해야하는데 앞서 만든 Chart와 유사하게 CountryPicker라는 함수를 콜백함수로 선언하고 api에서

import { fetchCountries } from "../../api";

const [fetchedCountries, setFetchedCountries] = useState([]);

국가 데이터를 import한 뒤 이것을 useState로 setter함수를 만들어준다.
그 다음

  useEffect(() => {
    const fetchAPI = async () => {
      setFetchedCountries(await fetchCountries());
    };
    fetchAPI();
  }, [setFetchedCountries]);

useEffect로 setter함수의 값이 바뀔때 마다 렌더링 해주자.

함수의 return값으론

return (
    <FormControl className={styles.formControl}>
      <NativeSelect
        defaultValue=""
        onChange={(e) => handleCountryChange(e.target.value)}
      >
        <option value="Global">Global</option>
        {fetchedCountries.map((country, i) => (
          <option key={i} value={country}>
            {country}
          </option>
        ))}
      </NativeSelect>
    </FormControl>
  );

앞서 import한 FormControl, NativeSelect를 return해주고
NativeSeclect의 옵션값들로는 fetchedCountries에 map메소드를 이용해 각 국가별 이름을 받아온다.

각 국가별 이름이 옵션박스에 잘 들어가있다.

여기서 국가를 선택하면

선택한 국가의 데이터가 나온다.
요 데이터가 정확한지 갑자기 궁금해져서 질병관리청 수치와 비교해보았다.

오늘 2월 14일 기준 수치로 봤을때 동일하다.

그런데 한가지 문제점이 있었는데 국가를 선택한 뒤 다시 세계 데이터를 보기 위해 Global을 선택하면 화면이 렌더링되지 않는 오류가 있었다.
이 오류는 CountryPicker의 retun값의

<option value="Global">Global</option>

이 부분이 문제였는데 앞서 map메소드로 얻어낸 각 국가별 이름에는 Global이라는 이름의 국가가 없기 때문에 나는 오류다. 이를 해결하기 위해선 Global을 선택했을 때 빈 문자열이 들어가도록 value를 비워주면 해결된다.