여러 웹 응용 프로그램 및 사이트는 타사 API 및 데이터 서비스에 의존합니다.
이 React challenge에서는 타사 API 서비스에 대한 API 요청을 하는 방법을 배웁니다. 이것은 공개 API입니다. 따라서 인증이 필요 없습니다.
이 과제를 해결하기 위해 공개 된 Game of Thrones API를 활용하여 각 게임의 12 가지 게임과 각 도서의 개별 세부 정보를 가져 와서 표시합니다.
https://scotch.io/courses/10-react-challenges-beginner/fetch-and-display-from-an-api
과제 : API에서 목록 가져 오기
일반적으로 JSON 형식의 API에서 수신 한 데이터는 표준 JavaScript 객체로 파싱 됩니다. API의 목록은 일반적으로 개별 데이터가 포함 된 개체의 배열입니다.
이 과제의 주요 과제는 다음과 같습니다.
시동 코드
시작하려면 이 기본 CodeSandbox를 포크로 만듭니다. https://codesandbox.io/s/4qvy5222n9
CodeSandbox에서 다음을 찾을 수 있습니다.
힌트
Axios를 사용하여 REST API 엔드 포인트에 GET 요청을 작성하십시오. 또한 배열의 데이터를 렌더링 하려면 .map() JavaScript 메서드를 사용하십시오.
마지막 페이지는 다음과 같습니다.
시작하려면 이 기본 CodeSandbox를 포크로 만듭니다. https://codesandbox.io/s/4qvy5222n9
솔루션 : API에서 가져 오기 및 표시 목록
이 React 과제에서는 제공되는 공개 API 엔드 포인트에서 데이터를 가져 오는 것이 목표입니다.
Axios는 HTTP 요청을 하기 위한 JavaScript 라이브러리입니다. 또한 반환 된 데이터는 구성 요소에서 사용하기 전에 상태 변수에 저장됩니다.
이 과제는 4 단계로 완료됩니다.
종속성 설치
왼쪽 사이드 바에 "Add Dependency"버튼을 사용하여 Axios를 CodeSandbox에 설치하십시오. Axios를 App() 구성 요소로 가져 오기 :
import axios from 'axios';API 데이터를 보관할 상태 변수 만들기
API 요청을 수행하는 도구를 설치했지만 반환 된 데이터를 구성 요소에서 사용할 수 있도록 상태로 저장해야 합니다.
다음을 사용하여 useState 후크를 구성 요소로 가져옵니다.
import React, { useState } from 'react';App() 구성 요소에서 books라는 상태 변수를 만듭니다.
import // ...
function App(){
const [books, setBooks] = . useState(null);
return (
// returned JSX here
)
}books의 기본값은 null로 설정되고 setBooks 메소드는 책 값을 리턴 된 데이터로 갱신하는 데 사용됩니다.
API 요청하기
API 요청을 처리하기 위해 우리는 일단 API 요청을 해야 할 때 호출되는 함수에 페칭 액션을 묶습니다. App() 구성 요소에 fetchData 함수를 만들고 Axios를 사용하여 API 끝점에서 필요한 데이터를 가져옵니다. 다음과 같이하십시오.
import // ...
function App(){
const [books, setBooks] = . useState(null);
const apiURL = "https://www.anapioficeandfire.com/api/books?pageSize=30";
const fetchData = async () => {
const response = await axios.get(apiURL)
setBooks(response.data)
}
return (
// returned JSX here
)
}위의 스니펫을 사용하여 fetchData 함수를 생성하여 Game of Thrones 서적을 가져 오는 요청을 받았습니다. 요청이 완료되면 setBooks 메서드를 사용하여 데이터를 books에 할당합니다.
반환 된 데이터 렌더링
우리는 데이터를 가져 오는 기능을 가지고 있으며 상태로 저장하는 동안 데이터를 가져올 수 있습니다. 배열에 반환 된 각 책의 책 이름, 저자, 페이지 수, 국가 및 출시일을 렌더링 하는 것으로 이동합니다.
App() 구성 요소의 반환 된 JSX에서 fetchData 함수를 데이터 가져 오기 단추로 전달합니다. 버튼을 클릭 할 때마다 onClick 이벤트 핸들러를 사용하여 함수를 시작합니다.
다음과 같이하십시오.
import // ...
function App(){
// component variables go here
const fetchData = async () => {
const response = await axios.get(apiURL)
setBooks(response.data)
}
return (
<div className="App">
<h1>Game of Thrones Books</h1>
<h2>Fetch a list from an API and display it</h2>
{/_ Fetch data from API _/}
<div>
<button className="fetch-button" onClick={fetchData}>
Fetch Data
</button>
</div>
{/_ Display data from API _/}
<div className="books">
// Data from API goes here
</div>
</div>
)
}이를 통해 Fetch Data 버튼을 클릭하면 fetchData 함수가 호출되어 데이터를 가져 와서 상태로 저장합니다.
제공되는 JSX 템플릿을 사용하여 각 책을 렌더링 하려면 .map() 메서드를 사용하여 가져온 배열의 객체를 반복합니다. 다음과 같이하십시오.
import // ...
function App() {
// Component variables go here
return (
<div className="App">
<h1>Game of Thrones Books</h1>
<h2>Fetch a list from an API and display it</h2>
{/_ Fetch data from API _/}
<div>
// Button to fetch data
</div>
{/_ Display data from API _/}
<div className="books">
{books &&
books.map((book, index) => {
const cleanedDate = new Date(book.released).toDateString();
const authors = book.authors.join(', ');
return (
<div className="book" key={index}>
<h3>Book {index + 1}</h3>
<h2>{book.name}</h2>
<div className="details">
<p>: {authors}</p>
<p>: {book.numberOfPages} pages</p>
<p>: {book.country}</p>
<p>: {cleanedDate}</p>
</div>
</div>
);
})}
</div>
</div>
);
}books에 가치가 있으면 JSX를 조건부로 렌더링 했습니다. 날짜가 렌더링 되기 전에 인간이 읽을 수 있는 날짜로 변환해야 했습니다. 또한 작성자의 데이터가 배열로 된 것을 보고 배열 데이터를 쉼표와 공백으로 구분 된 문자열로 변환했습니다.
이것들과 함께, 데이터 가져 오기 버튼을 클릭하면 12 가지 게임 오브 랭 (Thrones Game of books)의 모든 목록이 표시됩니다.
마지막 페이지는 다음과 같습니다.
여기에서 완성 된 CodeSandbox를 찾을 수 있습니다 : https://codesandbox.io/s/r094p6ylkq
결론
이 문제를 해결하기 위해 API에서 데이터를 가져 와서 받은 데이터를 표시했습니다.
등록된 댓글이 없습니다.
