[react.js]axios 외부 데이터 연동하기

Axios 사용방법

설치

yarn add axios

 

예제

아주 간단한 예제를 만들어보자

 

src/App.js

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  state = {
    data: [],
  };

  //함수
  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  };

  //로딩
  //예제로 쓸 데이터
  loadingData = async () => {
    try {
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/todos/1'
      );
      this.setState({
        // boards: 'test'
        data: response.data,
      });
    } catch (e) {
      console.log(e);
    }
  };

  //마운트 될때 실행
  componentDidMount() {
    const { loadingData } = this;
    loadingData();
  }

  render() {
    const { data } = this.state;
    const { handleChange } = this;
    return (
      <div>
        {
          <textarea
            name="getData"
            onChange={handleChange}
            rows={7}
            value={JSON.stringify(data, null, 2)}
          />
        }
      </div>
    );
  }
}

export default App;

 

src/App.js

단순히 stringify 하는것보다 이렇게 하면 훨씬 디테일하겠지?

***
return (
<div>
	{data.map((item) => {
    	return (
    		<div key={item.id}>
    			<a href={`/read/${item.id}`}>
    				<p>{item.title}</p>
    			</a>
    		</div>
    	);
    })}
</div>

***