React API 호출방법

useEffect + Promise 기반 API 호출 메서드 2가지 활용법

useEffect Hook을 활용하여, 컴포넌트가 최초 렌더링 후 mount될 때 한 번만 데이터를 동적으로 받아올 수 있도록 할 수 있다. 이 때, fetch 또는 axios를 이요해서 데이터를 받아온다.

fetch

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

function Data(){
	const [data, setData] = useState([]);
  	
  	useEffect(() => {
		fetch('데이터를 받아올 URL 주소')
      		.then((response) => response.json())
      		.then((json) => setData(json));
    }, []);
  
  return (
    <div>
     	{data.map(d => (
                <Link key={d.id} to={`${d.id}`}>{d.title}</Link>
            ))}
    </div>
    )
}

fetch 메소드는 Promise를 반환하므로, 이를 이용하여 then 메소드를 사용하여 데이터를 처리할 수 있다.

asycn-await 구문

useEffect(() => {
		const fetchData = async() => {
          const res = await fetch('데이터를 받아올 URL 주소');
          const result = res.json();
          return result;
        }	
        
        fetchData().then(res => setData(res));
    }, []);

axios

axios는 fetch API와 유사한 Promise 기반 HTTP 클라이언트 라이브러리로 데이터를 동적으로 받아올 수 있다. fetch API와 달리 third-party 라이브러리로 1) 별도의 설치 후 import 하거나 또는 2) html 파일에 jsDeliver CDN을 이용해 사용 가능하다.

-----------------
npm install axios
-----------------
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

function News(){
	const [data, setData] = useState([]);
  	
  	useEffect(() => {
		const fetchData = async() => {
          const res = await axios.get('데이터를 받아올 URL 주소');
          return res.data;
        }	
        
        fetchData().then(res => setData(res));
    }, []);
  
  return (
    <div>
     	{data.map(d => (
                <Link key={d.id} to={`${d.id}`}>{d.title}</Link>
            ))}
    </div>
    )
}

axios는 fetch API와 달리 json 객체로 변환해주는 과정을 자동으로 해준다. 그리고 위의 코드에서 axios.get 메서드를 활용해 데이터를 비동기적으로 받아올 수 있다. 단, 응답 받은 객체에 data key에 접근하여 접근한 값(res.data)을 반환해야 데이터를 활용 가능하다.