[React] 비동기 작업 | 콜백 지옥 | Promise

---

비동기 작업

 

비동기 작업이란?

Web Application을 실행할 때 한 Task가 마무리될 때까지 기다리지 않고 각자 Task를 수행하여 중지 상태가 되는 것을 막는 것을 말한다.

 

 

비동기 작업이 가지는 3가지 상태

• Pending: 대기 상태. 현재 비동기 작업이 진행 중이거나 작업이 시작할 수도 없는 상태.
• Fulfilled: 비동기 작업이 성공적으로 이뤄진 상태
• Rejected: 비동기 작업의 실패 (서버 응답 지연 등)

 

 

코드 예시

// 2초 뒤에 응답값을 반환하는 함수
function isPositive(number, resolve, reject){
    setTimeout(()=>{
        if(typeof number === "number"){
            // 성공 -> resolve
            resolve(number >= 0 ? "양수" : "음수");
        } else {
            // 실패 -> reject
            reject("주어진 값이 숫자형이 아닙니다.")
        }
    }, 2000)
}

isPositive(
    [], // number 자리에 배열 넣음
    (res)=>{ // resolve (성공)
        console.log("성공적으로 수행함 : " , res);
    },
    (err) => { // reject (실패)
        console.log("실패함 : ", err)
    }
);


// 실패함 : 주어진 값이 숫자형이 아닙니다.

 

 

---

 

콜백 지옥

 

JavaScript에서 비동기 처리를 위해 콜백 함수를 사용하다 보면, 

콜백 함수 안에 콜백 함수를 중첩적으로 사용하는 경우가 있다.

이 때 콜백함수가 중첩되면서 생기는 문제를 흔히 콜백 지옥이라 한다.

 

코드 예시

multiple라는 콜백 함수에 setTimeOut을 통해 1초 간의 텀을 주고, 인자에 *2한 값을 반환하도록 한다.

function multiple(number, callback) {
	setTimeout(() => {
		const result = number * 2;
		if (callback){
			callback(result);
		} 
	},1000)
}

multiple(3, result => {
	console.log(result); // 6
});

 

multiple 함수로 콜백 지옥을 만들어보면 이렇게 출력된다.

console.log("콜백 지옥을 시작합니다.");
multiple(3, result => {
	console.log(result);
	multiple(result, result => {
		console.log(result);
		multiple(result, result => {
			console.log(result);
			console.log("작업 완료");
		});
	});
});

console.log("마지막 줄입니다.");

// **반환 순서**
// 콜백 지옥을 시작합니다.
// 마지막 줄입니다.
// 6
// 12
// 24
// 작업 완료

출력 순서를 보면 1초 씩 기다리다보니 코드가 순서대로 출력되지 않는 것을 볼 수 있다. 

코드의 가독성 또한 떨어진다.

 

 

---

 

Promise 객체 : 콜백지옥 탈출하기

이 때 Promise 객체를 사용해서 콜백 함수를 정리할 수 있다.

어떤 함수에 Promise 객체가 있다면, 그 함수는 비동기 작업을 하고 그 결과값을 then과 catch 메소드를 이용해 반환할 것이란 걸 의미한다.

 

코드 예시

function multiple(number) {
	const promise = new Promise((resolve, reject) => { // Promise 객체 안에 함수 집어넣음
		setTimeout (() => {
			const result = number * 2;
			if(result > 10){
				// 숫자가 10보다 높으면 에러 발생
				const e = new Error("숫자가 10보다 큽니다.");
				return reject(e);
			}
			resolve(result);  // number 값에 * 2 후 성공 처리
		}, 1000);
	});
	return promise; // Promise 객체 반환하도록 함
}

multiple(2)
	.then(number => { // then: resolve 수행 메소드
		console.log(number);
		return multiple(number);
	})
	.then(number => {
		console.log(number);
		return multiple(number);
	})
	.then(number => {
		console.log(number);
		return multiple(number);
	})
	.catch(e => { // catch : reject 수행 메소드
		console.log(e);
	});

 

 

결과값

Promise 객체 사용 시 위와 같이 then을 여러 번 사용하는 걸 then chaining이라 한다.

 

Promise 객체 사용의 장점

코드의 가독성을 높일 수 있고, then chain을 중간에 끊어서 다른 작업을 넣을 수도 있다. 

 

---

 

참조

한입 크기로 잘라먹는 리액트 (Winterlood, 인프런 강의)

https://bum-developer.tistory.com/entry/React-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98-Promise-async-await