React와 함께 Axios 사용

This tutorial was verified with Node.js v16.13.1, npm v8.1.4, react v17.0.2, and axios v0.24.0.

1단계 - 프로젝트에 Axios 추가
이 섹션에서는 How to Set up a React Project with Create React App 튜토리얼에 따라 생성한 React 프로젝트에 Axios를 추가합니다.

"npx create-react-app react-axios-example"

프로젝트에 Axios를 추가하려면 터미널을 열고 디렉토리를 프로젝트로 변경하십시오.

"cd react-axios-예제"

그런 다음 이 명령을 실행하여 Axios를 설치합니다.

“npm 설치 [email protected] ”

다음으로 Axios를 사용하려는 파일로 가져와야 합니다.

2단계 - GET 요청하기

이 예제에서는 새 구성 요소를 만들고 Axios를 여기에 가져와 GET 요청을 보냅니다.

React 프로젝트 내에서 PersonList라는 새 구성 요소를 만들어야 합니다.

먼저 src 디렉터리에 새 구성 요소 하위 디렉터리를 만듭니다.

"mkdir 소스/구성 요소"

이 디렉터리에서 PersonList.js를 만들고 구성 요소에 다음 코드를 추가합니다.

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        {
          this.state.persons
            .map(person =>
              <li key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

먼저 구성 요소에서 둘 다 사용할 수 있도록 React와 Axios를 가져옵니다. 그런 다음 componentDidMount 수명 주기 후크에 연결하고 GET 요청을 수행합니다.

API 엔드포인트의 URL과 함께 axios.get(url)을 사용하여 응답 객체를 반환하는 약속을 얻습니다. 응답 개체 내부에는 person 값이 할당된 데이터가 있습니다.

res.status 아래의 상태 코드 또는 res.request 내부의 추가 정보와 같은 요청에 대한 기타 정보를 얻을 수도 있습니다.

이 구성 요소를 app.js에 추가합니다.

import PersonList from './components/PersonList.js';

function App() {
  return (
    <div ClassName="App">
      <PersonList/>
    </div>
  )
}

그런 다음 애플리케이션을 실행합니다.

"npm 시작"

브라우저에서 애플리케이션을 봅니다. 10개의 이름 목록이 표시됩니다.

3단계 - POST 요청하기

import React from 'react';
import axios from 'axios';

export default class PersonAdd extends React.Component {
  state = {
    name: ''
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

handleSubmit 함수 내에서 양식의 기본 동작을 방지합니다. 그런 다음 상태를 사용자 입력으로 업데이트합니다.

POST를 사용하면 then 호출 내부에서 사용할 수 있는 정보가 포함된 동일한 응답 개체가 제공됩니다.

POST 요청을 완료하려면 먼저 사용자 입력을 캡처합니다. 그런 다음 응답을 제공하는 POST 요청과 함께 입력을 추가합니다. 그런 다음 양식에 사용자 입력을 표시해야 하는 응답을 console.log할 수 있습니다.

4단계 — DELETE 요청하기

import React from 'react';
import axios from 'axios';

export default class PersonRemove extends React.Component {
  state = {
    id: ''
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

게시해주셔서 감사합니다.