[React] API 호출하기

목표

React에서 API 호출하기

• useEffect를 이용하여 컴포넌트 mount 시점에 api를 호출하고 해당 api 결과를 일기 데이터의 초기값으로 이용하기.
• 자바스크립트 api 호출함수 fecth 사용하기.

App.js

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

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

function App() {
  const [data, setData] = useState([]);

  const dataId = useRef(0);

  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    const initData = res.slice(0, 20).map((it) => {
      return {
        name: it.name,
        content: it.body,
        hungry: (Math.floor(Math.random() * 9) + 1) * 10,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });
    setData(initData);
  };

  useEffect(() => {
    getData();
  }, []);

  const onCreate = (name, content, hungry) => {
    const created_date = new Date().getTime();
    const newItem = {
      name,
      content,
      hungry,
      created_date,
      id: dataId.current,
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  const onRemove = (targetId) => {
    const newDirayList = data.filter((it) => it.id !== targetId);
    setData(newDirayList);
  };

  const onEdit = (targetId, newContent) => {
    setData(
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it
      )
    );
  };
  return (
    <div className="App">
      <Lifecycle />
      <DiaryEditor onCreate={onCreate} />
      <DiaryList onEdit={onEdit} onRemove={onRemove} diaryList={data} />
    </div>
  );
}

export default App;

  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    const initData = res.slice(0, 20).map((it) => {
      return {
        name: it.email,
        content: it.body,
        hungry: (Math.floor(Math.random() * 9) + 1) * 10,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });
    setData(initData);
  };

getData 함수는 open api인 "https://jsonplaceholder.typicode.com/comments"에서 데이터를 가져옵니다. async await를 사용하여 동기스타일로 비동기 코드를 작성하였습니다. res를 slice로 20개의 데이터로 추리고, map을 사용하여 새로운 json 객체로 만들었습니다. id는 useRef를 사용하여 처리하였습니다. 그리고 setData로 초기 데이터를 세팅해주었습니다.

20개의 일기 데이터가 잘 적용된 것을 확인할 수 있습니다.

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.