React Hooks 및 async/await를 사용하여 Covid-19 바이러스 추적기 만들기

React로 코로나 바이러스 트래커 앱을 만들어 봅시다. 친절하게 만들어주신 무료 APICorona Stats를 사용하겠습니다.

이것은 기사 스타일에 따른 기본 코드가 될 것입니다.

파일 정리

create react app에서 필요하지 않은 파일을 정리합니다. 그런 다음 DisplayContainer 구성 요소를 만들고 App로 가져옵니다. 또는 선호하는 제출 방법을 수행하십시오.

import React from "react"

function App() {
  return <div>Hello World</div>
}

export default App

디스플레이 컨테이너

import React from "react"

const DisplayContainer = () => {
  return <div>DISPLAY CONTAINER</div>
}

export default DisplayContainer

import DisplayContainer from "./components/DisplayContainer"

function App() {
  return (
    <div>
      <DisplayContainer />
    </div>
  )
}

데이터 가져오기

우리는 ReactsuseState 및 useEffect 후크를 사용할 것입니다.

useState를 사용하면 React의 기능 구성 요소에 상태를 추가할 수 있습니다

.

useEffect는 페이지가 렌더링되거나 변경될 때 어떤 일이 일어나기를 원할 때 사용됩니다.

React에서 useState 및 useEffect를 가져와서 시작합니다. 그런 다음 사용할 상태를 만듭니다. 로드, 오류 및 통계 상태는 관리하려는 항목이므로 필요합니다.

const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const [stats, setStats] = useState([])

우리의 기능은 async/await 기능이 될 것입니다. 이를 위해 try/catch/finally 블록을 사용하겠습니다. 이렇게 시각화하는 것이 멋지고 쉽다는 것을 알았습니다.

import React, { useState, useEffect } from 'react';

const DisplayContainer = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [stats, setStats] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {

      } catch (error) {

      } finally {

      }
    }
  })

상태와 레이아웃이 배치되어 있으므로 나머지를 추가해 보겠습니다.

데이터 가져오기 및 상태 설정

시도 - fetch를 사용하여 끝점에서 데이터를 가져와야 합니다. 그런 다음 데이터를 사용할 수 있도록 JSON로 변환합니다. 다음으로 이JSON 데이터로 상태를 설정합니다.

try {
  const response = await fetch("https://covid19.mathdro.id/api")
  const data = await response.json()
  setStats(data)
}

catch - catch 블록에서 오류 상태를 설정합니다. 오류가 있는 경우입니다.

 } catch (error) {
        setError(error);
 }

finally - 이 함수가 수행하기를 원하는 마지막 작업은 로딩 상태를 false로 설정하는 것입니다.

finally {
        setLoading(false);
  }

전체 데이터 가져오기 기능은 다음과 같습니다.

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch("https://covid19.mathdro.id/api")
      const data = await response.json()
      setStats(data)
    } catch (error) {
      setError(error)
    } finally {
      setLoading(false)
    }
  }
  setLoading(true)
  fetchData()
}, [])

useEffect 끝에 빈 배열[]이 있습니다. 이 기능을 다시 수행하기 위해 종속성이 이동하는 곳입니다. 이를 위해 빈 배열을 추가해야 합니다. 그렇지 않으면 두려운 무한 루프가 발생합니다.

이제 React 개발 도구에서 상태를 확인하여 성공적으로 작동했는지 확인하십시오. API에서 확인, 복구 및 사망 통계를 원합니다.

데이터 표시

개발 도구에서 상태를 확인하면 상태가 개체가 있는 개체임을 알 수 있습니다.

이제 이와 같은 통계를 표시하려고 하면stats.confirmed.value 오류가 발생합니다TypeError: stats.confirmed is undefined. 아직 존재하지 않는 것을 표시하려고 하기 때문입니다. 있는지 먼저 확인해야 합니다. 이것은 간단한 ternary operator 로 수행됩니다.

삼항 연산자 - "참이면 이렇게 하고, 아니라면 이렇게 하세요."

return (
  <div style={{ textAlign: `center` }}>
    <h2>Confirmed:</h2>
    <span>
      {stats.confirmed ? stats.confirmed.value : "Sorry not available"}
    </span>
    <h2>Deaths:</h2>
    <span>{stats.deaths ? stats.deaths.value : "Sorry not available"}</span>
    <h2>Recovered:</h2>
    <span>
      {stats.recovered ? stats.recovered.value : "Sorry not available"}
    </span>
  </div>
)

마치다

코로나 바이러스 통계가 표시됩니다.

import React, { useState, useEffect } from "react"

const DisplayContainer = () => {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [stats, setStats] = useState({})

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://covid19.mathdro.id/api")
        const data = await response.json()
        setStats(data)
      } catch (error) {
        setError(error)
      } finally {
        setLoading(false)
      }
    }
    setLoading(true)
    fetchData()
  }, [])


  return (
    <div style={{ textAlign: `center` }}>
      <h2>Confirmed:</h2>
      <span>
        {stats.confirmed ? stats.confirmed.value.toLocaleString() : null}
      </span>
      <h2>Deaths:</h2>
      <span>{stats.deaths ? stats.deaths.value.toLocaleString() : null}</span>
      <h2>Recovered:</h2>
      <span>
        {stats.recovered ? stats.recovered.value.toLocaleString() : null}
      </span>
    </div>
  )
}

export default DisplayContainer

숫자 형식을 지정하기 위해 .toLocaleString()를 사용했습니다. 이제 약간의 CSS만 있으면 됩니다.

연결하자