React에서 데이터 가져오기: 빠른 가이드
본문
외부 소스 또는 애플리케이션의 백엔드에서 API에서 데이터를 가져오는 것은 여러 가지 방법으로 수행할 수 있습니다.
이 빠른 가이드에서는 4가지 다른 패턴을 사용하여 REST API에 HTTP 요청을 만들어 반응 앱에서 데이터를 가져오는 방법을 보여줍니다.
시작하기 전에 REST API가 무엇인지 다시 살펴보겠습니다.
REST API란 무엇입니까?
REST API(RESTful API라고도 함)는 REST 아키텍처 스타일의 제약 조건을 준수하고 RESTful 웹 서비스와의 상호 작용을 허용하는 애플리케이션 프로그래밍 인터페이스(API 또는 웹 API)입니다. REST는 "REpresentational State Transfer"를 의미합니다.
이 가이드에서는 Github REST API를 사용하고 샘플 응답은 다음과 같습니다.
{
"login": "jideabdqudus",
"id": 45945474,
"node_id": "MDQ6VXNlcjQ1OTQ1NDc0",
"avatar_url": "https://avatars.githubusercontent.com/u/45945474?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/jideabdqudus",
"html_url": "https://github.com/jideabdqudus",
"followers_url": "https://api.github.com/users/jideabdqudus/followers",
"following_url": "https://api.github.com/users/jideabdqudus/following{/other_user}",
"gists_url": "https://api.github.com/users/jideabdqudus/gists{/gist_id}",
"starred_url": "https://api.github.com/users/jideabdqudus/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/jideabdqudus/subscriptions",
"organizations_url": "https://api.github.com/users/jideabdqudus/orgs",
"repos_url": "https://api.github.com/users/jideabdqudus/repos",
"events_url": "https://api.github.com/users/jideabdqudus/events{/privacy}",
"received_events_url": "https://api.github.com/users/jideabdqudus/received_events",
"type": "User",
"site_admin": false,
"name": "Jide Abdul-Qudus.",
"company": null,
"blog": "www.abdulqudus.com",
"location": "Lagos, Nigeria.",
"email": null,
"hireable": true,
"bio": "Software Engineer.",
"twitter_username": null,
"public_repos": 57,
"public_gists": 0,
"followers": 12,
"following": 0,
"created_at": "2018-12-17T15:57:35Z",
"updated_at": "2021-04-06T20:48:07Z"
}이 (api.github.com/users/jideabdqudus) 끝점에 대한 GET 요청이 있을 때마다 응답으로 이 Javascript 개체를 반환하고 우리는 이 데이터를 애플리케이션에서 사용하기로 결정할 수 있습니다.
Fetch API를 사용하여 데이터 가져오기
Fetch API는 서버 또는 API 끝점에서 리소스를 가져오기 위한 내장 JavaScript 메서드입니다. 윈도우 객체(window.fetch)에 대한 대부분의 최신 브라우저에 내장된 도구이며 JavaScript Promise를 사용하여 HTTP 요청을 매우 쉽게 만들 수 있습니다.
가져오기로 간단한 GET 요청을 하려면 필수 인수인 URL 끝점을 포함하기만 하면 됩니다. 요청의 응답을 가리키는 약속을 반환합니다. React 구성 요소가 마운트되면 이 요청을 하고 싶기 때문에 기능 기반 구성 요소에는 useEffect라는 Hook을 사용하고 클래스 기반 구성 요소에는 componentDidMount라는 후크를 사용할 것입니다.
import React, { useState, useEffect } from "react";
export default function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://api.github.com/users/jideabdqudus")
.then((response) => {
if (response.ok) {
return response.json();
}
throw response;
})
.then((data) => {
setData(data);
})
.catch((error) => {
console.error("Error fetching data: ", error);
setError(error);
})
.finally(() => {
setLoading(false);
});
}, []);
if (loading) return "Loading...";
if (error) return "Error!";
return (
<div style={{ textAlign: "center" }}>
<img src={data.avatar_url} alt="Avatar" height="100" />
<p>Name: {data.name}</p>
<p>Bio: {data.bio}</p>
<p>Username: {data.login}</p>
<p>Location: {data.location}</p>
<p>Public Repos: {data.public_repos}</p>
</div>
);
}위의 코드에서 우리는 구성 요소가 마운트 되면 가져오기 요청을 하고 데이터 상태에서 응답을 다시 보내는 매우 간단한 기능 구성 요소를 만들었습니다.
useEffect 내에서 fetch 함수 내에서 API 끝점을 선언합니다. .then() 콜백은 응답이 괜찮은지 확인하는 데 사용되었습니다(response.ok). 응답이 정상이면 JSON 데이터로 응답을 다시 호출합니다.
정상 응답이 아닌 경우 요청하는 동안 오류가 발생했다고 가정합니다. fetch를 사용하여 오류를 처리하려면 catch 콜백에서 처리할 오류로 응답을 던집니다.
여기 우리의 예에서는 setError를 사용하여 오류 데이터를 상태로 설정합니다. 오류가 있으면 "오류!"라는 텍스트를 반환합니다.
.finally() 콜백은 약속이 성공적으로 해결되었는지 여부에 따라 호출되는 함수입니다. 여기에서 loading을 false로 설정하여 더 이상 로딩 텍스트를 볼 수 없습니다.
대신 요청이 성공적으로 이루어진 경우 페이지에 데이터가 표시되고 그렇지 않은 경우 요청하는 데 오류가 발생했음을 알 수 있습니다.
Axios를 사용하여 React에서 데이터를 가져오는 방법
두 번째 패턴은 Axios를 사용하는 것입니다. Axios는 브라우저 및 node.js를 위한 사용하기 쉬운 약속 기반 HTTP 클라이언트입니다. Axios를 사용하면 요청을 가로채고 취소할 수 있으며 사이트 간 요청 위조에 대한 클라이언트 측 보호 기능을 제공하는 기본 제공 기능도 있습니다.
Axios는 React/Javascript 라이브러리이므로 앱에서 사용하려면 먼저 설치해야 합니다.
npm install axios or yarn add axios그런 다음 사용할 구성 요소의 맨 위에 가져옵니다. Axios로 HTTP 요청을 만드는 것은 매우 쉽고 React에서 데이터를 가져오는 가장 인기 있는 방법 중 하나입니다. 이전 Fetch 예제를 axios 요청으로 변환할 것입니다.
import React, { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
axios("https://api.github.com/users/jideabdqudus")
.then((response) => {
setData(response.data);
})
.catch((error) => {
console.error("Error fetching data: ", error);
setError(error);
})
.finally(() => {
setLoading(false);
});
}, []);
if (loading) return "Loading...";
if (error) return "Error!";
return (
<div style={{ textAlign: "center" }}>
<img src={data.avatar_url} alt="Avatar" height="100" />
<p>Name: {data.name}</p>
<p>Bio: {data.bio}</p>
<p>Username: {data.login}</p>
<p>Location: {data.location}</p>
<p>Public Repos: {data.public_repos}</p>
</div>
);
}Axios를 사용하면 fetch와 정확히 동일한 약속 구문을 사용할 수 있습니다. 그러나 첫 번째 then 콜백을 사용하여 응답이 괜찮은지 수동으로 결정하고 오류를 발생시키는 대신 Axios가 이를 처리합니다.
async/await 구문을 사용하여 React에서 데이터 가져오기
ES7에서는 async / await 구문을 사용하여 promise를 해결할 수 있게 되었습니다. Async/await는 Javascript에서 비동기 코드를 작성하는 비교적 새로운 방법입니다.
이것의 이점은 .then(), .catch() 및 .finally() 콜백, 약속을 제거하고 마치 약속 없이 동기 코드를 작성하는 것처럼 비동기적으로 해결된 데이터를 간단히 되돌릴 수 있다는 것입니다.
왜 async/await 입니까? 간단히 말해서 async/await를 사용하면 동기 방식으로 비동기 코드를 작성할 수 있습니다. 비동기 함수에 대해 알아야 할 한 가지는 다음과 같습니다. 그들은 항상 약속을 반환합니다.
useEffect를 사용할 때 효과 함수(첫 번째 인수)를 비동기 함수로 만들 수 없다는 사실을 알아야 합니다.
비동기 함수를 생성하려면 함수 정의 전에 async 키워드를 추가하기만 하면 됩니다. 이전 예제를 async/await 구문으로 변환할 것입니다.
import React, { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
getData();
}, []);
async function getData() {
await axios("https://api.github.com/users/jideabdqudus")
.then((response) => {
setData(response.data);
})
.catch((error) => {
console.error("Error fetching data: ", error);
setError(error);
})
.finally(() => {
setLoading(false);
});
}
if (loading) return "Loading...";
if (error) return "Error!";
return (
<div style={{ textAlign: "center" }}>
<img src={data.avatar_url} alt="Avatar" height="100" />
<p>Name: {data.name}</p>
<p>Bio: {data.bio}</p>
<p>Username: {data.login}</p>
<p>Location: {data.location}</p>
<p>Public Repos: {data.public_repos}</p>
</div>
);
}요약하면, async/await는 비동기 자바스크립트 코드를 작성하기 위한 더 깔끔한 구문입니다. 코드의 가독성과 흐름을 향상시킵니다.
async/await를 사용하는 동안 염두에 두어야 할 사항:
- 비동기 함수는 약속을 반환합니다.
- Await는 비동기 블록 내에서만 사용할 수 있습니다.
- Await는 함수("약속")가 해결되거나 거부될 때까지 기다립니다.
사용자 정의 React Hook을 사용하여 React에서 데이터를 가져오는 방법(useFetch)
시간이 지남에 따라 데이터를 가져오려는 모든 구성 요소 내에서 모든 상용구와 함께 useEffect 후크를 계속 작성하는 것이 지루하고 시간이 많이 걸린다는 것을 알게 될 것입니다.
재사용된 코드를 줄이기 위해 사용자 지정 후크를 특수 추상화로 사용할 수 있습니다. 이 후크는 타사 라이브러리에서 직접 작성할 수 있습니다(여기에 있는 것처럼 react-fetch-hook 라이브러리를 사용).
useFetch는 동형 페치 후크입니다. 즉, SSR(서버 측 렌더링)과 함께 작동합니다.
HTTP 요청을 만드는 사용자 지정 후크를 사용하면 구성 요소를 훨씬 더 간결하게 만들 수 있습니다. 우리가 해야 할 일은 컴포넌트의 맨 위에 있는 후크를 호출하는 것입니다.
import React from "react";
import useFetch from "react-fetch-hook"
export default function App() {
const { isLoading, error, data } = useFetch("https://api.github.com/users/jideabdqudus");
if (isLoading) return "Loading...";
if (error) return "Error!";
return (
<div style={{ textAlign: "center" }}>
<img src={data.avatar_url} alt="Avatar" height="100" />
<p>Name: {data.name}</p>
<p>Bio: {data.bio}</p>
<p>Username: {data.login}</p>
<p>Location: {data.location}</p>
<p>Public Repos: {data.public_repos}</p>
</div>
);
}결론
위에 표시된 4가지 다른 패턴은 API를 사용하는 좋은 방법이지만 비교적 작은 애플리케이션을 빌드할 때 주로 fetch를 사용하고 확장성을 위해 대규모 애플리케이션을 빌드할 때 Axios/useFetch를 사용합니다.
출처 : https://dev.to/jideabdqudus/fetching-data-in-react-quick-guide-4fba
- 다음글궁극의 ReactJS 리소스 🛠2021년 웹 개발자용 21.09.27