[React] "코로나인포" 클론코딩

이찬형·2020년 3월 8일

코로나인포

코로나인포는 신종 코로나 바이러스에 대한 정보를 제공해주는 사이트에요.

벨로그에서 코로나인포 프론트엔드 개발자님의 글을 보다가 React를 사용하셨길래..
나도 한 번 따라 만들어보자!! 누군가에겐 도움이 되겠지!! 란 생각으로 코딩을 진행했습니다.

계획

우선 확진자, 완치자 등을 긁어와야 하는데..

질병관리본부에서 데이터를 제공하고 있지만 json 형태로 받을 수가 없어서 고민을 했어요.
파이썬으로 크롤링해서 컨테이너 내부에 하드코딩 할까.. 하던 도중!!

코로나인포 API를 발견합니다. 코로나인포 갓갓..
필요했던 데이터만 쪽 뽑아서 올려주셨어요. 감사합니다ㅠㅠ

MainPage.js란 컨테이너와 프레젠터인 CoronaTemplate.js를 만들고, 컨테이너에서 state 상태 관리, 프레젠터에 props를 넘겨주는 방법으로 구현하겠습니다.

프레젠터

레이아웃을 짜는 것이 목적이니깐 props를 받아서 출력하는 것이 전부에요.

import React from "react";
import styled from "styled-components";

const CoronaTemplate = ({ title, info, location, news }) => {
  return (
    <div>
      <div>{title}</div>
      <div>{info}</div>
      <div>{location}</div>
      <div>{news}</div>
    </div>
  );
};

export default CoronaTemplate;

props엔 각각의 컴포넌트가 들어갈 거에요. 스타일링은 나중에 하고 컨테이너로 빠르게 넘어갑시다.

컨테이너

state를 관리하고 필요한 함수를 정의, 호출 및 프레젠터에 props를 넘겨주는 기능이 필요해요.

class MainPage extends React.Component {
  state = {
    total: 0,
    cure: 0,
    death: 0,
    increase: 0,
    cure_rate: 0,
    location: [],
    news: [],
  };

우선 state엔 api에서 받아올 데이터를 저장하게끔 만들었어요.

  componentDidMount = async () => {
    const { data } = await api.reports();
    this.setState({
      total: data.total_count,
      cure: data.cure_count,
      death: data.death_count,
      increase: data.increase_count,
      cure_rate: data.cure_rate
    });

    const { data: location } = await api.locations();
    const sortLoaction = location.sort((a, b) => b.total - a.total);
    this.setState({ location: sortLoaction });

    const {
      data: { news }
    } = await api.news();
    this.setState({ news });
  };

componentDidMount()를 통해 render()가 호출되자마자 state를 설정할 수 있도록 구현했습니다.
(~~사실 try catch문으로 짜야 해요..~~)

  render() {
    console.log(this.state);
    const {
      total,
      cure,
      death,
      increase,
      cure_rate,
      location,
      news
    } = this.state;
    return (
      <CoronaTemplate
        title={<Title />}
        info={
          <Info
            total={total}
            cure={cure}
            death={death}
            increase={increase}
            cure_rate={cure_rate}
          />
        }
        location={<Location location={location} />}
        news={<News news={news} />}
      />
    );
  }