[React] 업비트 API로 비트코인 map 반복문으로 출력해보기

이전 게시물에 이어서 진행하겠습니다.

[React] react 프로젝트 생성하기

프로젝트를 만들었다면 app.js에서 헤더부분을 지워줍니다.

 

function App() {
  return (
    <div className="App">
    /* 이 부분 다 지우기
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      */
    </div>
  );
}

 

사전에 설치해야 할 라이브러리

(npm start하는것 처럼 vs 터미널에서 실행하면 됩니다.)

//부트스트랩 설치
npm install react-bootstrap bootstrap

//API로 데이터 가져올 AXIOS 설치
npm install axios

 

 

 

디자인하기 귀찮으니 설치한 부트스트랩을 사용할겁니다.

비트코인 데이터를 반복문으로 돌리기 위한 디자인도 추가해줍시다. 사용될 table도 같이 import 해줍시다.

import 'bootstrap/dist/css/bootstrap.min.css';
import { Table  } from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

 

그리고 부트스트랩 설치하였으면 비트코인을 출력할 테이블 컴포넌트를 가져와봅시다.

다르게 디자인하실분들은 여기서 참고해주시면 됩니다.

Tables | React Bootstrap

그냥 똑같이 진행하려면 아래와 같이 return문 안에 table태그들을 넣어줍니다.

return (
    <div className="App" style={{marginTop:'185px', marginLeft:'50px', marginRight:'50px'}}>
      <Table striped bordered hover variant="dark"  >
        <thead>
          <tr>
            <th>#</th>
            <th>market</th>
            <th>korean_name</th>
            <th>english_name</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          
        </tbody>
      </Table>
    </div>
  );

그러면 아래와 같이 테이블이 만들어집니다.

그리고 코인데이터를 ajax해서 가져오기 위해 사용할 axios라이브러리와 데이터를 저장할 usestate를 추가합니다.

그리고 중복으로 호출되는 것을 막기 위해 useEffect도 같이 import해줍니다.

추가한 부분은 주석처리했습니다.

import 'bootstrap/dist/css/bootstrap.min.css';
import { Table  } from 'react-bootstrap';
import './App.css';

/*추가*/
import axios from 'axios';
import { useState, useEffect } from 'react';


function App() {
	//비트코인 데이터를 저장할 state
	let [coin,setCoin] = useState([]);
  	return (
  		...

 

그리고 업비트에 등록된 코인 데이터를 가져옵니다.

문서는 아래 업비트 사이트에서 참고해주세요.

업비트 개발자 센터

 

useEffect와 axios를 사용하고 반복문을 출력하기 전에 올바르게 결과물을 가져왔는지 확인하기 위해 console.log도 따로 만들어줍니다.

 

function App() {
  let [coin,setCoin] = useState([]);
  
  useEffect(()=>{ //state가 변경되면서 중복 실행되는것을 막기 위해 사용
    axios	// 코인 데이터를 가져오기 위해 axios 사용
    .request({
      method: 'GET',
      url: 'https://api.upbit.com/v1/market/all?isDetails=false',
      headers: {accept: 'application/json'}
    })
    .then(function (response) {
      // 개발자도구에서 데이터 확인 가능
      console.log(response.data)	
      setCoin(response.data);
    });
  },[])

 

올바르게 가져왔다면 개발자도구(F12 누르면 나옴)에서 아래처럼 데이터가 나옵니다.

 

 

 

이제 마무리로  map 반복문을 출력해봅시다.

먼저 tbody안의 부분의 틀을 먼저 작성해줍니다.

삼항연산자를 통해 올바르게 데이터를 가져오지 못했다면 데이터가 없다고 출력이 될겁니다.

 <tbody>
  {
    (coin.length > 0) ? coin.map((row,idx)=>{ 
      return (
        <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      )
    })  : <tr><td colSpan={4}>데이터가 없습니다</td></tr>
  }

 </tbody>

map return문안에 업비트 문서에서 필드명에 맞게 데이터를 넣어줍시다.

 return (
    <tr>
    <td>{idx+1}</td>
    <td>{row.market}</td>
    <td>{row.korean_name}</td>
    <td>{row.english_name}</td>
  </tr>
  )

 

그러면 아래 캡처이미지처럼 업비트에 등록된 코인 데이터들이 출력되는 것을 확인할 수 있습니다.