[React] 게시판 만들기 #4 : Axios 설치 및 사용

• 리액트로 게시판 만들기
  1. VSCode 와 Node 설치하기
  2. 리액트 프로젝트와 네비게이션 생성하기
  3. 페이지 이동을 위한 Route 설정하기
  4. Axios 설치 및 사용해보기
  5. Axios 를 이용하여 게시판 목록 만들기
  6. Axios 를 이용하여 게시판 상세보기 만들기
  7. Axios 를 이용하여 게시판 작성 만들기
  8. Apollo GraphQL 을 설치 및 사용해보기
  9. Apollo GraphQL 을 이용하여 게시판 목록 만들기
  10. Apollo GraphQL 을 이용하여 게시판 상세보기 만들기
  11. Apollo GraphQL 을 이용하여 게시판 작성 만들기

---

React 소스코드는 여기 에서 확인 가능합니다.

개발에 사용한 Restful API 는 여기 에서 확인 가능합니다.

---

Axios 설치

npm install axios --save

Axios 사용

🛠 pages/station/Station.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function GetData() {
  const [data, setData] = useState({});
  useEffect(() => {
    axios.get('http://127.0.0.1:8000/toyseven/stations').then((response)=> {
      setData(response.data);
    })
  }, []);

  // response.data 의 데이터는 array 형식[{...}, {...}, ...] 이기 때문에
  // data 에 바로 map 함수를 이용하면 에러가 발생한다.
  // Object.values(data) 을 사용해 배열을 리턴받아 사용
  const item = (Object.values(data)).map((item) => (
    <li key={item.stationId}>
      {item.stationName}
    </li>
  ));

  return item;
}

function Station() {
  const item = GetData();
  return (<div><ul>
    {item}
    </ul>
  </div>);  
}
  
export default Station;