비동기처리란?

1. 동기와 비동기

동기란 앞의 작업을 완료해야 다음 작업을 실행할 수 있다. 자바스크립트는 기본적으로 동기적으로 동작한다. 동기적으로 동작하는 코드는 작성된 순서에 따라 작업이 진행되므로 작업의 흐름을 파악하기 쉽다. 그러나 다음과 같이 오래 걸리는 작업을 빨리 끝날 작업보다 먼저 실행하게 되면 지연 문제가 생긴다.

function longTask() {
  // 10초 이상 걸리는 작업
 }
 
 function shortTask() {
  // 매우 빠르게 끝나는 작업
 }
 
 longTask();
 shortTask();

빨리 끝나는 작업도 longTask가 완료되어야 실행할 수 있다. 따라서 진행할 모든 작업의 속도가 전체적으로 느려진다. 이 문제를 해결하기 위해 앞의 작업과 별도로 진행해야한다. 이를 비동기라고 한다.

setTimeout(() => {
	console.log("1");
}, 3000);

console.log("2");

 

함수 setTimeout을 이용하여 작업을 비동기적으로 처리할 수 있다. 위의 코드를 실행해보면 2,1 이라는 결과가 나온다. setTimeout은 비동기적으로 동작하는 함수이므로 setTimeout이 종료될 때까지 기다리지 않고 바로 다음 코드를 실행할 수 있다. 즉, 비동기 작업은 동기 작업과는 달리 작업의 실행 순서와 완료 순서가 일치하지 않는다.

2. 콜백 함수로 비동기 처리하기

function double(num, cb) {
	setTimeout( () => {
    	const doubleNum = num * 2;
        cb(doubleNum);
    }, 1000);
}

double(10, (res) => {
	console.log(res);
});

console.log("마지막");

1.  함수 double을 호출하며 두 번째 인수로 화살표 함수로 만든 콜백 함수 전달
2. 비동기 작업이 완료되면 콜백 함수를 호출해 연산의 결괏값을 인수로 전달
3. 앞서 호출한 함수 double이 비동기 작업이므로 해당 작업의 종료를 기다리지 않고 먼저 실행된다,

콜백 함수를 이용하면 비동기 작업의 결괏값을 사용할 수 있다. 

3. 프로미스 객체를 이용해 비동기 처리하기

프로미스(Promise)는 비동기 처리를 목적으로 제공되는 자바스크립트 내장 객체이다. 프로미스는 특수한 목적을 위해 다양한 기능을 추가한 객체로 이를 이용하면 콜백함수를 이용한 비동기 처리보다 쉽게 비동기 작업을 수행할 수 있다.

1) 프로미스 비동기 작업의 3가지 상태

• 대기(Pending) 상태 : 작업을 아직 완료하지 않음
• 성공(Fulfilled) 상태 : 작업을 성공적으로 완료함
• 실패(Rejected) 상태 : 작업이 모종의 이유로 실패함

출처 : https://www.getoutsidedoor.com/2020/03/12/promise-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EB%A9%B0-%EC%9B%90%EB%A6%AC-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0/

대기 상태에서 작업을 성공적으로 완료하는 것을 해결(resolve)라고 한다. 작업을 해결하면 해당 작업은 성공 상태가 된다. 반대로 대기 상태에서 작업이 모종의 이유 (오류 발생 등)로 실패하는 것을 거부(reject)라고 한다. 작업이 거부되면 해당 작업은 실패 상태가 된다.

프로미스 객체를 만들 때 인수로 실행 함수(Executor)를 전달한다. 실행 함수란 비동기 작업을 수행하는 함수이다. 이 함수는 프로미스 객체를 생성함과 동시에 실행되며 2개의 매개변수를 제공받는다.

const promise = new Promise(
	function (resolve, reject) {
    	setTimeout (() => {
        	resolve("성공")
        }, 500);
    }
);

promise.then(function (res) {
	console.log(res);
});

실행 함수는 0.5초 기다린 다음 resolve를 호출해 성공 상태로 변경한다. 인수로 전달한 값 "성공"은 비동기 작업의 결괏값이 된다. then 메서드에 인수로 전달한 콜백 함수가 실행되고 콜백 함수의 매개변수에는 "성공"이라는 문자열이 전달된다. then 메서드는 인수로 전달한 콜백 함수의 비동기 작업이 성공했을 때 실행된다. 작업이 실패했을 때는 then 메서드에 인수로 전달한 콜백 함수가 실행되지 않는다. 따라서 catch 메서드를 사용해줘야 한다.

const promise = new Promise(
	function (resolve, reject) {
    	setTimeout (() => {
        	reject("실패")
        }, 500);
    }
);

promise.then(function (res) {
	console.log(res);
});

promise.catch(function (err) {
	console.log(err);
});

프로미스의 then과 catch 메서드를 이용하여 유연하게 비동기 작업을 처리할 수 있다.

 

위 글은 "한 입 크기로 잘라먹는 리액트"를 보고 작성한 글 입니다.