2. React에서 axios 사용하기(POST)

React에서 axios를 사용하여 POST 요청을 보내는 방법을 알려드리겠습니다.

먼저, `axios` 패키지를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 패키지를 설치합니다.

npm install axios

설치가 완료되었다면, POST 요청을 보내는 React 컴포넌트에서 `axios`를 import합니다.

import axios from 'axios';

그리고 POST 요청을 보낼 함수를 만듭니다. 함수에서 `axios.post()`를 사용하여 요청을 보냅니다. 다음은 간단한 예시입니다.

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    };
  }

  sendData = () => {
    const data = { name: 'John', age: 25 }; // 보낼 데이터 객체
    axios.post('https://example.com/api', data)
      .then(response => {
        console.log(response.data); // 성공적으로 요청을 보낸 후 받은 응답 데이터
        this.setState({ data: response.data });
      })
      .catch(error => {
        console.error(error); // 요청 중에 발생한 에러
      });
  }

  render() {
    return (
      <div>
        <button onClick={this.sendData}>데이터 보내기</button>
        <p>받은 데이터: {this.state.data}</p>
      </div>
    );
  }
}

export default MyComponent;

위 예시에서 `sendData` 함수는 버튼을 클릭할 때 실행되며, `axios.post()`를 사용하여 'https://example.com/api'로 POST 요청을 보냅니다. 요청이 성공하면 `.then()` 블록이 실행되며, 응답 데이터가 콘솔에 출력되고 `data` 상태가 업데이트됩니다. 요청 중에 에러가 발생하면 `.catch()` 블록이 실행되며, 에러가 콘솔에 출력됩니다.

이것은 간단한 예시이며, 실제로는 요청을 보낼 URL과 데이터를 적절하게 변경해야 합니다. 또한, 이 코드는 클래스형 컴포넌트를 기준으로 작성되었습니다. 함수형 컴포넌트에서는 `useState` 훅을 사용하여 상태를 관리할 수 있습니다.

 

 

 

===

 

함수형 예시

그리고 POST 요청을 보낼 함수를 만듭니다. 함수 안에서 `axios.post()`를 사용하여 요청을 보냅니다. 다음은 간단한 예시입니다.

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

const MyComponent = () => {
  const [data, setData] = useState('');

  const sendData = () => {
    const requestData = { name: 'John', age: 25 }; // 보낼 데이터 객체
    axios.post('https://example.com/api', requestData)
      .then(response => {
        console.log(response.data); // 성공적으로 요청을 보낸 후 받은 응답 데이터
        setData(response.data);
      })
      .catch(error => {
        console.error(error); // 요청 중에 발생한 에러
      });
  }

  return (
    <div>
      <button onClick={sendData}>데이터 보내기</button>
      <p>받은 데이터: {data}</p>
    </div>
  );
}

export default MyComponent;

위 예시에서 `MyComponent`는 함수형 컴포넌트로 작성되었습니다. `useState` 훅을 사용하여 `data` 상태와 `setData` 함수를 정의합니다. `sendData` 함수는 버튼을 클릭할 때 실행되며, `axios.post()`를 사용하여 'https://example.com/api'로 POST 요청을 보냅니다. 요청이 성공하면 `.then()` 블록이 실행되며, 응답 데이터가 콘솔에 출력되고 `setData`를 통해 `data` 상태가 업데이트됩니다. 요청 중에 에러가 발생하면 `.catch()` 블록이 실행되며, 에러가 콘솔에 출력됩니다.

이 예시는 함수형 컴포넌트에서 `axios`를 사용하는 방법을 보여주기 위한 간단한 예시입니다. 실제로는 요청을 보낼 URL과 데이터를 적절하게 변경해야 합니다.