React Hooks에서 Covid19 트래커 앱 만들기

소개

React 연습, 특히 Hooks x Web API를 습득하기 위해 제작되었습니다.
Covid19의 데이터는 disease.sh의 API에서 가져옵니다.



사이트의 내용으로는 세계 각국의 CoronaViruses Cases, Deaths, Recoverd 통계를 확인할 수 있습니다.
국가를 메뉴에서 선택하면 지도와 그래프도 해당 내용을 표시합니다. React의 Hooks에 의한 State 관리는 정말 강력하네요. 그래서 간단하고 쓰기 쉽고 생산성이 매우 높습니다.

하지만 RL
github 저장소

React의 최신 쓰기 방법에 따라 코드를 유의하고 있기 때문에 React를 공부하는 분에게는 Github 리포지토리가 도움이 될 것입니다.

사용 기술

React

JavaScript (ES6)

Hooks

Functional Component

firebase (Hosting)

Material UI

react-chartjs-2

react-leaflet

BEM

Functional Programming

Functional Component(함수 구성 요소)만 사용합니다. Class Component는 일절 사용하고 있지 않습니다.
Functional Component(함수 컴포넌트), Destructuring assignment(분할 대입), Hooks를 병용하는 것으로 React의 코드는 놀라울 정도로 간단하고 깨끗해집니다.
기존 Class Component를 일부러 다시 작성할 필요는 없지만, 앞으로는 기본적으로 Functional Component를 사용해야 할 것이다.

웹 API

Covid19의 데이터는 disease.sh의 API에서 가져옵니다.useEffect() 에서 fetch() 하고, useState() 에서 상태 관리하고 있습니다.

App.js

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState("worldwide");
  const [countryInfo, setCountryInfo] = useState({});
  const [tableData, setTableData] = useState([]);
  const [mapCenter, setMapCenter] = useState({ lat: 34.80746, lng: -40.4796 });
  const [mapZoom, setMapZoom] = useState(3);
  const [mapCountries, setMapCountries] = useState([]);
  const [casesType, setCasesType] = useState("cases");

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

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

          const sortedData = sortData(data);
          setTableData(sortedData);
          setCountries(countries);
          setMapCountries(data);
        });
    };

    getCountriesData();
  }, []);

  const onCountryChange = async (event) => {
    const countryCode = event.target.value;
    setCountry(countryCode);

    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);

        // all of the data from the country response
        setCountryInfo(data);
        // setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
        setMapCenter({ lat: data.countryInfo.lat, lng: data.countryInfo.long });
        setMapZoom(4);
      });
  };

// 以下略

앞

Card나 Menu등 주요한 컴퍼넌트는 Material UI를 사용하고 있기 때문에, 몹시 편합니다.
Material UI는 정말 유용합니다. Nuxt에서는 Vuetify를 사용했지만 개인적으로 React의 Material UI가 더 확고합니다.
Flexbox 소개 스타일링은 BEM에 근거해 CSS를 쓰고 있습니다만, 가능한 한 Marerial UI의 헬퍼로 끝내는 것이 좋았을지도 모릅니다.

차트는 react-chartjs-2, 맵은 react-leaflet이라는 라이브러리를 각각 사용합니다.

앞으로 하고 싶은 일

이번 사이트는 어디까지나 연습으로 만들었습니다. React의 실력은 꽤 붙일 수 있었다고 생각합니다.

현지화하고 싶습니다.

일본 국내의 토호쿠 지방의 Covid19 트래커 사이트를 만들고 싶습니다. 따라서 데이터를 검색하는 API를 변경해야 합니다.

SNS 자동 게시

웹사이트와는 별도로, Twitter에 그 날의 데이터를 자동으로 투고하는 기능을 붙이고 싶습니다. 사이트를 여는 것은 억권이므로, Twitter로 간단하게 정보를 확인할 수 있는 것이 편리할까라고.

참고

React 개발 효율을 3배로 하는 VS Code 확장 기능 및 환경 설정
React 첫 안건 획득까지의 흐름(학습·안건 찾기·면접·계약까지)

The Complete React Developer Course (w/ Hooks and Redux)
Universal React with Next.js - The Ultimate Guide
React Native 입문: 뉴스 앱을 만들면서 기억하자 / Hooks 대응 2020년판
React.js & Next.js 초입문
연습Firestore
최초의 JavaScript 제3판 ―ES2015 이후의 최신 웹 개발