[React] React에서 API 호출하기

목표: useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 사용

JSONPlaceholder를 사용할 것(데이터를 가져올 서버가 없기 때문에 open API를 활용할 거여용)

최상단 컴포넌트에서 데이터를 내려주고 있기 때문에 App.js에서 API를 통해 데이터를 세팅해주겠습니다.

src/App.js

import React, { useState, useRef, useEffect } from "react";
import "./App.css";
import DiaryList from "./components/DiaryList";
import DiaryEditor from "./DiaryEditor";

// https://jsonplaceholder.typicode.com/comments

function App() {
  //fetch를 통해 오픈API의 데이터를 가져와봅시다.
  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    console.log(res);

    //초기값으로 500개 중에 0부터 20개까지만 잘라내도록 하겠음
    const initData = res.slice(0, 20).map((item) => {
      return {
        author: item.email,
        contents: item.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });
    //가공한 데이터를 가지고 일기 데이터의 초기값을 설정
    setData(initData);
  };
  useEffect(() => {
    getData();
  }, []);
  
    const [data, setData] = useState([]);

  //useRef를 사용하여 고유 아이디를 만들 수 있다.
  const dataId = useRef(0);
  
  
  //아래 코드는 중략 ...

getData 함수(비동기 처리 함수) 코드 설명

• fetch메소드와 async await(ES8)을 통해 비동기 처리(API값을 가져오는 것) 그 이후의 작업은 받아온 데이터를 splice메소드를 통해 20개까지만 잘라내고 잘라낸 각각의 객체를 map함수를 통해 우리가 원하는 형태로 가공하여 return 합니다.

  fetch를 통해 가져온 데이터는 .json() 메소드를 통해 JSON형식으로 변환시켜줘야 합니다.

• emotion 값은 1 ~ 5 까지의 난수를 Math객체를 통해 구현가능합니다.
• id로 들어가는 고유값은 이전에 useRef를 통해 만들어놓은 dataId 라는 변수의 current값을 1씩 증가시켜주는 방법으로 만들어줍니다.
• 완성된 객체가 담긴 initData를 setData함수의 인자로 넘겨주어 초기값을 세팅해줍니다. (useEffect의 콜백함수에서 getData()를 호출해주고 deps값을 아무것도 주지 않으면 컴포넌트가 최초 렌더링됐을 때만 실행됩니다.)

출처: 한입 크기로 잘라 먹는 리액트 (Udemy)