[개발] React 에서 post 대기 중 표시

안녕하세요 @realmankwon 입니다.

React에서 POST 요청을 보내고 대기 중일 때 화면에서 변화를 보여주려면 일반적으로 두 가지 방법을 사용합니다.

1 . 로딩 상태 표시기를 사용하여 대기 중임을 표시하는 방법:

이 방법은 사용자가 POST 요청이 처리되는 동안 대기중인 것을 인식하도록 도와줍니다. 로딩 상태 표시기는 일반적으로 페이지의 상단이나 하단에 표시됩니다.
예를 들어, 다음과 같이 axios 라이브러리를 사용하여 POST 요청을 보내는 경우, loading 상태를 변경하여 요청이 처리되는 동안 로딩 상태 표시기를 표시할 수 있습니다.

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

function MyComponent() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);

    try {
      const response = await axios.post('https://example.com/api/my-resource', { data: 'my data' });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={handleSubmit}>Submit</button>
      {loading && <p>Loading...</p>}
    </div>
  );
}

2 . 요청이 완료될 때까지 버튼을 비활성화하는 방법:

이 방법은 사용자가 POST 요청이 완료될 때까지 버튼을 클릭할 수 없도록 막아줍니다. 이것은 일반적으로 disabled 속성을 사용하여 버튼을 비활성화하는 방법으로 수행됩니다.
예를 들어, 다음과 같이 useState를 사용하여 disabled 상태를 변경하고 요청이 완료되면 상태를 다시 변경하여 버튼을 활성화할 수 있습니다.

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

function MyComponent() {
  const [disabled, setDisabled] = useState(false);

  const handleSubmit = async () => {
    setDisabled(true);

    try {
      const response = await axios.post('https://example.com/api/my-resource', { data: 'my data' });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    } finally {
      setDisabled(false);
    }
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={disabled}>Submit</button>
    </div>
  );
}

위 코드에서 disabled 값이 true이면 버튼은 비활성화되고, false이면 활성화됩니다. 따라서 handleSubmit 함수는 버튼이 클릭되면 실행되며, 요청이 처리되는 동안 버튼이 비활성화됩니다.