[React] Spring으로 POST 보내는 두가지 방법_ then 방식과 async 방식

 

 

프로젝트를 하는 내내
then 방식으로 Spring에 요청을 보냈다.
그러다 다른 기능을 만들면서 코드를 찾아보니
async 방식으로 보내는 방법을 알게됐다.
두방법의 차이가 뭘까?

 

 

 

1. 상황설명

 

고객 정보를 저장하려 한다. 고객 정보는 body에 넣어 POST 방식으로 Spring에 보내질 것이다. 그러면 Spring은 React의 요청을 받아 처리할 것이다. 이때 조건이 있다. 고객 정보에 들어가는 초대 코드 번호가 중복되어선 안되는 것이다. 만약 초대 코드가 중복일 경우 Spring에서 React로 409를 보낼 것이다. React는 409를 Spring으로부터 받으면 "초대코드가 중복되었습니다. 다른 코드를 입력해주세요." 문구가 사용자 화면에 alert 될 것이다.

 

• POST 방식으로 보낸다.
• 상태 코드가 409인 경우, "초대코드가 중복되었습니다. 다른 코드를 입력해주세요." alert
• ok가 못오면 "저장을 실패했습니다."

 

 

 

---

 

 

 

 

2. then 방식

const handleSubmit = () => {
    // 백엔드로 POST 요청
    fetch("/api/customers", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
    })
    .then((response) => {
        // 409 중복 코드 오류 처리
        if (response.status === 409) {
            alert("초대코드가 중복되었습니다. 다른 코드를 입력해주세요.");
            // 다음 then으로 가지 않고 catch로 넘김
            throw new Error("DUPLICATE_CODE"); 
        }

        // 나머지 응답 오류 처리
        if (!response.ok) {
            alert("저장 실패");
            throw new Error("SAVE_FAILED");
        }

        // 다음 then에 데이터를 넘겨줌
        return response.json(); 
    })

...

then 방식은 비동기함수이다. 맨 처음 then을 보고 문제 없으면 다음 then으로 넘어가는 체이닝 방식으로, 코드에서 처리할 기능이 적을 때 사용하기 좋다. 그러나 로직이 복잡해지면 가독성이 떨어지거나 에러 처리를 중간 중간에 하기 어려워진다는 단점이 있다. 물론 남은 에러는 .catch( )에서 한번에 처리할 수 있다.

 

 

 

 

---

 

 

3. async 방식

   try {
            // 백엔드로 POST 요청
            const response = await fetch("/api/customers", {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(form),
            });

            // 409 중복 코드 오류 처리
            if (response.status === 409) {
                alert("초대코드가 중복되었습니다. 다른 코드를 입력해주세요.");
                return;
            }

            // 나머지 에러 처리
            if (!response.ok) {
                alert("저장 실패");
                return;
            }

            const savedCustomer = await response.json();
            ...
            
            } catch (error) {
            console.error(error);
            alert("오류가 발생했습니다."); // 혹시 모를 다른 에러들 여기서 처리하도록 함
        }
    };

async 방식은 비동기 코드를 동기적인 코드처럼 보이도록 해준다. 이 말이 이해가 잘 안될 수 있다. 쉽게 말해서 앞주자가 할 일을 다 끝내야만 다음 주자가 일을 할 수 있는데 (비동기), async 방식을 이용하면 앞주자가 할 일을 다 끝내지 못해도 다음 주자가 일을 할 수 있는 것처럼 보이도록 해준다(동기). 

여기서 실제로 그렇게 한다는 것은 아니다. 마치지 못한 일을 잠깐 일시정지 해두고 다른 일을 하고 난 뒤, 마치지 못했던 일을 할 수 있는 조건이 되었을 때 다시 실행해서 끝내는 방식이라고 생각하면 될 것 같다.

보통 async 방식은 try-catch와 함께 많이 쓴다. 왜냐면 async는 에러를 받는 구문이 따로 없기 때문이다. 이렇게 try-catch 구문과 함께 사용하여 복잡한 로직과 에러 처리를 직관적이게 작성할 수 있도록 해준다. 그리고 실제로 더 많이 사용하는 방식이 async 방식이라고 한다.