분류 Reactjs

API에서 가져 오기 및 표시 - challenge 7

컨텐츠 정보

  • 조회 360 (작성일 )

본문

여러 웹 응용 프로그램 및 사이트는 타사 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의 목록은 일반적으로 개별 데이터가 포함 된 개체의 배열입니다.


이 과제의 주요 과제는 다음과 같습니다.

  • '데이터 가져 오기'버튼을 클릭하면 API에서 데이터를 가져옵니다.
  • 반환 된 데이터에서 세부 정보를 렌더링 합니다.

시동 코드


시작하려면 이 기본 CodeSandbox를 포크로 만듭니다. https://codesandbox.io/s/4qvy5222n9 


CodeSandbox에서 다음을 찾을 수 있습니다.

  • GET 요청을 하는 API URL입니다.
  • 사용할 styles.css의 스타일.
  • 가져온 각 항목에 대해 제공된 JSX 템플릿.


힌트


Axios를 사용하여 REST API 엔드 포인트에 GET 요청을 작성하십시오. 또한 배열의 데이터를 렌더링 하려면 .map() JavaScript 메서드를 사용하십시오.


마지막 페이지는 다음과 같습니다.


rxlizqwmoczmafiyonum.mp4 



시작하려면 이 기본 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)의 모든 목록이 표시됩니다.


마지막 페이지는 다음과 같습니다.


r0j95x2r5qxcmnek54ex.mp4 


여기에서 완성 된 CodeSandbox를 찾을 수 있습니다 : https://codesandbox.io/s/r094p6ylkq


결론


이 문제를 해결하기 위해 API에서 데이터를 가져 와서 받은 데이터를 표시했습니다.





API