React: API에서 데이터를 가져오는 방법

사용자 인터페이스를 만들 때 API에서 데이터를 가져와야 하는 경우가 많습니다. 예를 들어 전자 상거래 사이트에서 제품은 API에서 가져오고 가져오는 데이터에는 제품 이미지, 가격, 이름, 설명 등이 포함됩니다.

이 기사에서는 API에서 데이터를 가져오는 방법을 다룰 것입니다. API에서 해리포터 캐릭터를 가져오는 매우 기본적인 앱을 만들 것이므로 바로 시작하겠습니다.
1- 앱 기반 만들기
기본적으로 우리가 원하는 것은 페이지가 로드될 때 임의의 Harry Potter 문자를 표시하는 것입니다. 이제 이를 위한 스켈레톤 앱을 빌드해 보겠습니다.

create-react-app을 사용하여 반응 앱을 만들고 Character 구성 요소를 만듭니다.

src/Character.js

import React from 'react';
import styled from 'styled-components';

const Character = ({
    imageURL,
    name
}) => {
    return (
        <Wrapper>
            <Image src={imageURL} />
            <Text>{name}</Text>
        </Wrapper>
    )
}

const Wrapper = styled.div`
border-radius:1rem;
padding:1rem;
border:2px solid black;
display:flex;
flex-flow:column nowrap;
width:20rem;
height:20rem;

`
const Image = styled.img`
width:auto;
height:85%;
object-fit:contain;
`

const Text = styled.div`
padding:0.5rem;
font-size:1.25rem;
`
export default Character

이 프로젝트에서는 스타일링을 위해 스타일이 지정된 구성 요소를 사용했습니다. 자세한 내용은 다음을 참조하십시오. https://smilepk145.medium.com/how-to-use-styled-components-in-react-ed609c49a6d6

Character 구성 요소를 사용해 보려면 App.js로 이동하여 다음과 같이 수정합니다.

src/App.js
Character 구성 요소를 시험하기 위해 모의 데이터를 사용했으며 출력은 다음과 같습니다.


예제 프로젝트에 충분하다고 생각합니다. 따라서 API에서 일부 문자를 가져와 동적으로 문자를 생성해 봅시다.

2-API에서 데이터 가져오기

데이터를 가져오기 위해 많은 대체 라이브러리를 사용할 수 있습니다. 내 선택은 axios 라이브러리를 사용하는 것입니다. 데이터를 가져오는 데 가장 많이 사용되는 라이브러리입니다. axios를 설치하려면 아래 코드를 터미널에 입력하십시오.

npm install axios

그리고 axios를 설치한 후 아래와 같이 App.js 파일을 수정합니다.

src/App.js

import React, { useEffect } from 'react';
import styled from 'styled-components';
import axios from 'axios';

const App = () => {
  useEffect(() => {
    const getCharacters = async function () {
      const baseURL = "<http://hp-api.herokuapp.com/api/characters>";
      const response = await axios.get(baseURL);
      const data = response.data;
      console.log("data", data);
    }
    getCharacters();
  }, [])

  return (
    <AppWrapper>

    </AppWrapper>
  )
}
const AppWrapper = styled.div`
width:100%;
height:100%;
display:flex;
flex-flow:row wrap;
justify-content:space-evenly;
align-items:center;
`

export default App

기본적으로 앱이 처음 로드될 때 데이터를 가져오기 위해 useEffect 후크를 사용했습니다.

** getCharacters** 함수에서 baseURL을 사용하여 API에 get 요청을 보냈습니다. 그런 다음 API가 응답을 반환합니다. console.log("data",data)의 출력은 다음과 같습니다.


보시다시피 데이터는 개체의 배열이며 각 개체에는 문자에 대한 정보가 있습니다. Character 구성 요소로 4개의 임의의 문자를 표시해 보겠습니다. App.js를 아래와 같이 수정합니다.

src/App.js

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';
import Character from './Character';

const App = () => {
  const [characters, setCharacters] = useState([]);
  useEffect(() => {
    const getCharacters = async function () {
      const baseURL = "<http://hp-api.herokuapp.com/api/characters>";
      const response = await axios.get(baseURL);
            /*filter the data this time, because some data doesn't have image and we
            need an image for each character*/
      const data = response.data.filter(char => char.image);
      console.log("data", data);
      let fourRandomCharacters = [];
      for (let i = 0; i < 4; i++) {
        const index = Math.floor(Math.random() * data.length);
        fourRandomCharacters.push(data[index]);
      }
            //set characters to characters state
      setCharacters(fourRandomCharacters);
    }
    getCharacters();
  }, [])

  return (
    <AppWrapper>
      {characters.map((character, index) =>
        <Character
          key={index}
          imageURL={character.image}
          name={character.name}
        />
      )}
    </AppWrapper>
  )
}
const AppWrapper = styled.div`
width:100%;
height:100%;
display:flex;
flex-flow:row wrap;
justify-content:space-evenly;
align-items:center;
`
export default App

이번에는 일부 데이터에 이미지가 없기 때문에 반환된 데이터를 필터링했습니다. 그런 다음 useState 후크를 사용하여 4개의 문자를 React 상태로 저장했습니다. 그리고 Array.map 메서드를 사용하여 상태에서 4개의 문자를 모두 렌더링했습니다.

출력은 다음과 같습니다.





요약:

React의 API에서 데이터를 가져올 때 API에 get 요청을 보내고 필요에 따라 반환된 데이터를 수정하고 해당 데이터를 앱에서 사용합니다.

이 기사는 여기까지입니다. 많은 것을 즐기고 배웠기를 바랍니다.