[React] 리액트에서 API 호출하기 - async/await, axios

// async/await으로 호출
import React, { FC, useEffect, useState } from "react";

const Test: FC = () => {
  // 문자열 타입의 상태 변수 data를 선언하고 초기값으로 빈 문자열을 할당한다
  const [data, setData] = useState<string>("");

  useEffect(() => {
    async function test() {
      // 비동기로 데이터를 가져오기 위해 fetch 함수를 사용해 API를 호출한다
      const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
      // 응답 데이터를 JSON 형식으로 변환해 jsonObj에 할당한다
      const jsonObj = await response.json();
      // jsonObj의 title 속성을 추출해 문자열로 할당한다
      const title: string = jsonObj.title;
      // title 값을 setData를 사용해 data 상태 변수에 설정한다
      setData(title);

      return title;
    }

    // test 함수를 호출한다
    test();
  }, []);

  // data 값을 출력하는 <div> 요소를 반환한다
  return <div>{data}</div>;
};

export default Test;

// axios로 호출

import axios from "axios";
import React, { FC, useEffect, useState } from "react";

const Test: FC = () => {
  // 문자열 타입의 상태 변수 data를 선언하고 초기값으로 빈 문자열을 할당한다
  const [data, setData] = useState<string>("");

  useEffect(() => {
    async function test() {
      const res = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
      // res의 title 속성을 추출해 문자열로 할당한다
      const title: string = res.data.title;
      // title 값을 setData를 사용해 data 상태 변수에 설정한다
      setData(title);

      return title;
    }

    // test 함수를 호출한다
    test();
  }, []);

  // data 값을 출력하는 <div> 요소를 반환한다
  return <div>{data}</div>;
};

export default Test;