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("https://jsonplaceholder.typicode.com/news");
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)을 반환해야 데이터를 활용 가능합니다.
비동기 fetch
const getData = async () => {
const res = await fetch("url").then((res) => res.json());
};
//api
const getData = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/comments").then(
(res) => res.json()
);
const initData = res.slice(0, 20).map((itm) => {
return {
author: itm.email,
content: itm.body,
emotion: Math.floor(Math.random() * 5) + 1,
create_date: new Date().getTime,
id: dataId.current++,
};
});
setData(initData);
};
useEffect(() => {
getData();
}, []);
이렇게 useEffect에 빈배열을 넣어두면 렌더링 할 때 자동으로 타게된다.
useEffect + Promise 기반 API 호출 메서드 2가지 활용법
useEffect Hook을 활용하여, 컴포넌트가 최초 렌더링 후 mount될 때 한 번만 데이터를 동적으로 받아올 수 있도록 할 수 있습니다. 이 때, fetch 또는 axios를 이요해서 데이터를 받아옵니다.
서버 구축을 통한 데이터를 받아오기 어려운 상황에서, 다음의 사이트에서 fake API를 활용해 화면에 뿌려볼 수 있습니다.
01 fetch
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
function News() {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/news");
const result = res.json();
return result;
};
fetchData().then((res) => setData(res));
}, []);
return (
<div>
{data.map((d) => (
<Link key={d.id} to={`${d.id}`}>
{d.title}
</Link>
))}
</div>
);
}
