나만의 홈페이지 만들기-05 [오픈API 호출하여 카드리스트디자인적용]

자바스크립트는 API 데이터를 연동하기 위해서 주로 두개의 라이브러리를 이용한다.

하나는 Fetch API 그리고 다른하나는 Axios 이다.

앞에건 빌트인 라이브러리이고, Axios는 외부 라이브러리이다.

차이저은 잘설명되어 있는 링크를 참고한다.

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API

React | axios란? (feat. Fetch API)

• 공공데이터중에 테스트에 활용할만한 API를 탐색한다.

https://www.data.go.kr/

공공데이터 포털

여러가지 오픈된 공공데이터 API를 검색하고 사용할수 있다.

• 발로란트 게임 무기 리스트 API를 활용

https://dash.valorant-api.com/endpoints/weapons

Valorant-API

• Axios 를 이용하여 API 호출하는 함수 정의 - 비동기방식

import axios from 'axios';
....
async function getData() {
    try {
      setIsLoading(true);
      const res = await axios.get('<https://valorant-api.com/v1/weapons>');
      setGetResult(res.data.data);

    } catch (err) {
      setGetResult(err.response?.data || err);
    }
    finally {
      setIsLoading(false)
    }
  }

• 페이지 로딩시 데이터를 가져오기위해서 useEffect를 사용하여 위에서 만든 함수를 호출한다.

useEffect(() => {
    getData();
  }, [])

• 데이터는 비동기방식으로 가져오기때문에 getResult 값이 채워지는데는 약간의 시간차가 발생한다. getResult가 값이 변경될때 가져온 데이터를 확인하게 위해서 추가한다.

useEffect(() => {
    if (getResult !== null)
      console.log(getResult)
  }, [getResult])

• 채워진 데이터를 map 함수를 이용하여 카드리스트에 뿌려준다.

return (
    <Container>
      <Navbar bg="dark" variant="dark" >
        <Container>
          <Navbar.Brand href="#home">
            <img
              alt=""
              src="/logo192.png"
              width="30"
              height="30"
              className="d-inline-block align-top"
            />{' '}
            React Bootstrap
          </Navbar.Brand>
        </Container>
      </Navbar>
      <Row xs={1} md={3} className="g-4">
        {getResult && getResult.map((r) =>
          <Col key={r.uuid}>
            <Card >
              <Card.Img variant="top" src={r.displayIcon} />
              <Card.Body>
                <Card.Title>{r.displayName}</Card.Title>
                <Card.Text>
                  {r.category}

                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>
          </Col>
        )
        }
      </Row>
    </Container>
  );
}

export default App;

• App.js 에 전체소스는 아래와 같다.

import React, { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';

import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import axios from 'axios';

function App() {

  const [getResult, setGetResult] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  async function getData() {
    try {
      setIsLoading(true);
      const res = await axios.get('https://valorant-api.com/v1/weapons');
      setGetResult(res.data.data);

    } catch (err) {
      setGetResult(err.response?.data || err);
    }
    finally {
      setIsLoading(false)
    }
  }

  useEffect(() => {
    getData();
  }, [])


  useEffect(() => {
    if (getResult !== null)
      console.log(getResult)
  }, [getResult])


  return (
    <Container>
      <Navbar bg="dark" variant="dark" >
        <Container>
          <Navbar.Brand href="#home">
            <img
              alt=""
              src="/logo192.png"
              width="30"
              height="30"
              className="d-inline-block align-top"
            />{' '}
            React Bootstrap
          </Navbar.Brand>
        </Container>
      </Navbar>
      <Row xs={1} md={3} className="g-4">
        {getResult && getResult.map((r) =>
          <Col key={r.uuid}>
            <Card >
              <Card.Img variant="top" src={r.displayIcon} />
              <Card.Body>
                <Card.Title>{r.displayName}</Card.Title>
                <Card.Text>
                  {r.category}

                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>
          </Col>
        )
        }
      </Row>
    </Container>
  );
}

export default App;

• 저장하고 npm start를 실행하면, 아래와 같은 화면이 나온다.

• 브라우저에서 오른쪽 마우스 [검사]를 클릭하면 아래와 같이 데이터를 가져오는것을 알수있다.

리스트 형태의 데이터는 위의 형태와 유사하게 구현하면된다.

소스 : GitHub - JahvoTrust/myweb

GitHub - JahvoTrust/myweb