React에서 Fetch API를 사용하여 POST 요청 작성

1. React에서 Fetch API를 사용하여 POST 요청 작성
2. HTTP 헤더 설정과 함께 Fetch를 사용하는 POST 요청
3. React에서 async/await와 함께 Fetch를 사용하는 POST 요청
4. 오류 처리와 함께 Fetch를 사용하는 POST 요청

API를 통한 데이터 송수신은 복잡한 웹 애플리케이션의 필수 기능입니다.

React는 웹 앱 구축을 위한 매우 인기 있는 프레임워크입니다. 다른 JavaScript 기반 프레임워크와 마찬가지로 개발자는 Fetch API를 사용하여 서버와 통신할 수 있습니다.

이 가이드는 React에서 POST 요청을 작성하는 방법을 보여줍니다.

React에서 Fetch API를 사용하여 POST 요청 작성

React 클래스 구성 요소를 빌드할 때 수명 주기 메서드에서 HTTP 요청을 만들어야 합니다. 일반적으로 componentDidMount() 메서드에 있습니다.

수명 주기 메서드를 대체하는 기능 클래스 구성 요소에 대한 useEffect() 후크가 있습니다.

Fetch 요청의 구조는 fetch(endpointURL, requestOptions)와 같습니다.

이해를 돕기 위해 React의 실제 기능 구성 요소를 살펴보겠습니다.

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    fetch(url, options);
  }, []);
  return <div className="App"></div>;
}

CodeSandbox의 라이브 데모.

이 예제에서는 useEffect() 후크를 사용하여 요청합니다. 후크에 대한 첫 번째 인수는 콜백 함수이며 여기서 fetch 메서드를 사용하여 요청합니다.

url 변수에는 데이터를 POST하려는 API 끝점의 URL이 포함됩니다.

options 변수에는 options 개체가 포함되어 있으며 이는 POST 요청을 만들기 위한 필수 구성 요소입니다. 여기에는 방법, 헤더, 본문의 세 가지 속성이 있습니다.

method 속성 값은 수행해야 하는 작업 유형을 지정합니다. 이 경우에는 'POST'이며 서버에 새 레코드를 만들도록 지시합니다.

'GET', 'PUT', 'PATCH', 'DELETE' 값도 가질 수 있습니다.

headers 속성은 데이터 처리 방법을 지정하는 데 사용됩니다.

마지막으로 body 속성에는 API 끝점의 다른 쪽에 있는 서버로 전송해야 하는 데이터가 포함되어 있습니다.

HTTP 헤더 설정과 함께 Fetch를 사용하는 POST 요청

이미 말했듯이 headers 속성은 데이터의 목적과 수신 응용 프로그램이 데이터를 처리하는 방법을 나타냅니다.

이 예에서는 'application-json' 값을 설정하여 데이터를 JSON으로 구문 분석해야 함을 지정합니다.

React에서 async/await와 함께 Fetch를 사용하는 POST 요청

약속을 연결하기 위해 then() 메서드를 사용하는 대신 많은 개발자가 더 깔끔한 async/await 구문을 사용합니다. 예제를 살펴보겠습니다.

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (e) {
        return e;
    }
    }
    getData()
  }, []);
  return <div className="App"></div>;
}

이 예에서는 동일한 url 및 options가 있지만 then() 및 연결된 약속을 async 및 await 키워드로 바꿉니다.

약속 체인을 await 키워드로 바꾸려면 함수 정의에서 async 키워드를 사용해야 합니다.

useEffect() 후크의 첫 번째 인수인 콜백 함수와 함께 async 키워드를 직접 사용할 수 없습니다. 대신 콜백 내에서 getData라는 새 함수를 정의하고 함수 끝에서 호출합니다.

오류 처리와 함께 Fetch를 사용하는 POST 요청

많은 개발자들이 POST 요청을 시도할 때 공통적인 실수를 합니다. 실수는 options 개체의 body 매개변수에 대해 잘못된 값을 제공하는 것입니다.

body 매개변수는 자체 키-값 쌍이 있는 JavaScript 객체를 사용합니다. 종종 개발자는 원시 JavaScript 개체를 전달하기 때문에 오류가 발생합니다.

비슷한 상황에 있고 계속 오류가 발생하는 경우 원시 데이터를 JSON.stringify() 메서드의 인수로 전달해 보세요.

POST 요청을 할 때 오류 처리를 구현하는 가장 쉬운 방법은 try...catch 문을 사용하는 것입니다. 위의 예에서 getData 함수를 살펴보겠습니다.

const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (error) {
        return error;
    }

함수 본문에는 두 개의 코드 블록이 포함되어 있습니다. 하나는 try 문 아래에 있고 다른 하나는 catch 아래에 있습니다.

먼저 요청을 만들고 데이터를 반환하려고 합니다. 어떤 이유로 오류가 있고 요청이 실패하면 JavaScript는 catch 블록에서 코드를 실행합니다.

catch 문은 요청 실패의 원인을 나타내는 변수 이름인 하나의 인수를 사용합니다. 이 값을 반환하고 무엇이 잘못되었는지 조사할 수 있습니다.

많은 개발자가 이 변수를 콘솔에 기록합니다.