React와 함께 Axios를 사용하는 방법

소개

웹의 많은 프로젝트는 개발의 일부 단계에서 REST API와 인터페이스해야 합니다. 가져오기 API.

Axios는 프라미스 기반이므로 보다 읽기 쉬운 비동기 코드를 위해 JavaScript의 async 및 await를 활용할 수 있습니다.

또한 요청을 가로채거나 취소할 수 있으며 사이트 간 요청 위조에 대한 클라이언트 측 보호 기능이 내장되어 있습니다.

이 기사에서는 Axios를 사용하여 React 애플리케이션 내에서 널리 사용되는 JSON Placeholder API에 액세스하는 방법의 예를 볼 수 있습니다.

전제 조건

이 기사를 따라하려면 다음이 필요합니다.

• Ubuntu 18.04에 Node.js를 설치하는 방법
• Create React App 자습서로 React 프로젝트를 설정하는 방법으로 설정된 새로운 React 프로젝트
• 또한 HTML 및 CSS에 대한 기본 지식과 함께 How To Code in JavaScript 시리즈에서 찾을 수 있는 JavaScript에 대한 기본 지식을 갖추는 데 도움이 됩니다.

이 튜토리얼은 Node.js v16.13.1, npm v8.1.4, react v17.0.2 및 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-example

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

npm install axios@0.24.0

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

2단계 - GET 요청하기

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

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

먼저 src 디렉토리에 새로운 components 하위 디렉토리를 만듭니다.

mkdir src/components

이 디렉터리에서 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 start

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

3단계 - POST 요청하기

이 단계에서는 POST라는 다른 HTTP 요청 메서드와 함께 Axios를 사용합니다.

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

PersonAdd.js를 만들고 다음 코드를 추가하여 사용자 입력을 허용하고 이후에 콘텐츠를 API에 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 함수 내에서 양식의 기본 작업을 방지합니다. 그런 다음 state를 user 입력으로 업데이트합니다.

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

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

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

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

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

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

npm start

브라우저에서 애플리케이션을 봅니다. 새 사용자를 제출하기 위한 양식이 표시됩니다. 새 사용자를 제출한 후 콘솔을 확인하십시오.

4단계 — DELETE 요청하기

이 예에서는 axios.delete를 사용하고 URL을 매개변수로 전달하여 API에서 항목을 삭제하는 방법을 보여줍니다.

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

PersonRemove.js를 만들고 다음 코드를 추가하여 사용자를 삭제합니다.

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>
    )
  }
}

다시 말하지만 res 개체는 요청에 대한 정보를 제공합니다. 그런 다음 양식을 제출한 후 해당 정보를 다시 console.log할 수 있습니다.

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

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';

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

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

npm start

브라우저에서 애플리케이션을 봅니다. 사용자 제거 양식이 표시됩니다.

5단계 — Axios에서 기본 인스턴스 사용

이 예에서는 URL 및 기타 구성 요소를 정의할 수 있는 기본 인스턴스를 설정하는 방법을 볼 수 있습니다.

api.js라는 별도의 파일을 만듭니다.

nano src/api.js

다음 기본값을 사용하여 새 axios 인스턴스를 내보냅니다.

import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

기본 인스턴스가 설정되면 PersonRemove 구성 요소 내에서 사용할 수 있습니다. 다음과 같이 새 인스턴스를 가져옵니다.

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {
  // ...

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

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  // ...
}

이제 http://jsonplaceholder.typicode.com/이 기본 URL이기 때문에 더 이상 API에서 다른 끝점에 도달할 때마다 전체 URL을 입력할 필요가 없습니다.

6단계 — async 및 await 사용

이 예에서는 async 및 await를 사용하여 약속 작업을 수행하는 방법을 볼 수 있습니다.

await 키워드는 약속을 확인하고 값을 반환합니다. 그런 다음 값을 변수에 할당할 수 있습니다.

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {
  // ...

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

    const response = await API.delete(`users/${this.state.id}`);
    
    console.log(response);
    console.log(response.data);
  }

  // ...
}

이 코드 샘플에서는 .then()이 대체됩니다. promise가 확인되고 값이 response 변수에 저장됩니다.

결론

이 튜토리얼에서는 React 애플리케이션 내에서 Axios를 사용하여 HTTP 요청을 생성하고 응답을 처리하는 방법에 대한 몇 가지 예를 살펴보았습니다.

React에 대해 자세히 알아보려면 React 주제 페이지에서 더 많은 연습과 프로그래밍 프로젝트를 확인하십시오.