[React] 실습 / API 호출 / useEffect / Mount

개요

React 에서 API 를 호출 해보자 !! 

useEffect 를 이용하여 컴포넌트 Mount 시점에 API의 결과값을 초기값으로 활용해보자 !!

App.js

import { useEffect, useRef, useState } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState([]);
  const dataId = useRef(0);

  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => {
      return res.json();
    });

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++
      };
    });

    setData(initData);
  };

  useEffect(() => {
    getData();
    console.log(data);
  }, []);
  //
  return (
    <div className="App">
      <div>
        {data.map((it) => {
          return (
            <div
              style={{
                border: "solid black 1px",
                marginBottom: "10px"
              }}
            >
              <span>작성자: {it.author}</span>
              <span>내용: {it.content}</span>
              <span>감정: {it.emotion}</span>
              <span>작성일: {it.created_date}</span>
              <span>id: {it.id}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

1. State 초기화 (data, dataId)
  -> data 는 api 호출을 통한 데이터들 초기화 해줄 state, dataId는 data Id값 초기화 해줄 state

2. getData 함수 초기화
  -> fetch 메소드를 통해 jsonplaceholder 에서 무료로 제공하는 API 데이터를 initData 함수를 통해 가공 하여 setData 함수를 통해 data(state) 값을 초기화 해준다.

3. getData 호출
  -> useEffect 를 사용하여 컴포넌트가 Mount 되는 시점에 getData를 호출하여 data State 값을 초기화 해준다.

 

참고

https://espania.tistory.com/353

[React] 기본 / Life Cycle / Hooks

https://espania.tistory.com/364

[javascript] API 호출/ fetch

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

https://codesandbox.io/s/agitated-heyrovsky-indth1?file=/src/App.js%E2%80%8