리액트(React) 비동기 작업 - 콜백함수, Promise, async/await

웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있습니다. 예를 들어 웹 애플리케이션에서 서버쪽 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신합니다.

이렇게 API를 호출할 때 네트워크 송수신 과정에서 시간이 걸리기 때문에 비동기 적으로 처리함으로써 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러가지 요청을 처리할  수 있습니다.

 

1. 콜백함수 

자바스크립트에서 함수는 객체입니다.  다른 함수의 파라미터로 전달되는 함수를 콜백함수라고 합니다.  

콜백함수는 비동기 실행에서 태스크가 끝나기 전에 함수가 실행되지 않을 것을 보장합니다. 

가장 흔하게 볼 수 있는 setTimeout 함수 예제입니다. 즉, 순차적으로 실행되다가 setTimeout 함수를 만나면 정해진 시간이 경과 되고 지정한 함수가 실행됩니다.  아래는 예시는 3초 경과 뒤에 message 함수가 실행되는 것을 보여줍니다.

const message = function() {
    console.log("This message is shown after 3 seconds");
}

setTimeout(message, 3000);

또한 이벤트 선언을 하기 위해서도 사용됩니다.  예를들어 사용자가 버튼을 클릭할 때 함수를 실행한다면 이것도 콜백함수라 할 수 있다.

 

2. Promise

콜백 지옥에서 벗어나기 위해 도입된 기능으로 콜백함수는 여러 작업을 연달아 처리하기 위해 함수를 여러 번 감싸는 것이 아니라 .then 을 사용하여 그 다음 작업을 설정하기 때문에 이것을 방지할 수 있습니다.

1초에 걸쳐서 10, 20, 30, 40 과 같은 형태로 여러 번 순차적으로 처리하는 것을 promise로 사용하는 예시입니다.

function increase(number) {
	const promise = new Promise((resolve, reject) => {
    // resolve는 성공, reject는 실패
    setTimeout(() => {
    	const result = number + 10;
        if (result > 50) {
        	//50보다 크면 에러 발생시키기
            const e = new Error('NumberTooBig');
            return reject(e);
        }
        resolve(result); // number 값에 +10 후 성공 처리
    }, 1000);
    });
    return promise;
    }
    
    increase(0)
    	.then(number => {
        // Promise에서 resolve된 값은 .then을 통해 받아 올 수 있음
        console.log(number);
        return increase(number); // Promise를 리턴하면
        })
        .then(number => {
        // 또 .then으로 처리 가능
        console.log(number);
        return increse(number);
        })
        .then(number => {
        // 또 .then으로 처리 가능
        console.log(number);
        return increse(number);
        })
        .then(number => {
        // 또 .then으로 처리 가능
        console.log(number);
        return increse(number);
        })
        .catch(e => {
        // 도중에 에러가 발생한다면 .catch를 통해 알 수 있음
        console.log(e);
        });

3. async/await

Promise를 더욱 쉽게 사용할 수 있도록 해주는 문법입니다. 이것을 사용하려면 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise이 앞부분에 await 키워드를 사용합니다. 이렇게 하면 Promise가 끝날 때까지 기다리고 결과값을 특정변수에 담을 수 있습니다.

function increase(number) {
  const promise = new Promise((resolve, reject) => {
    // resolve는 성공, reject는 실패
    setTimeout(() => {
    	const result = number + 10;
        if (result > 50) {
        	//50보다 크면 에러 발생시키기
            const e = new Error('NumberTooBig');
            return reject(e);
        }
        resolve(result); // number 값에 +10 후 성공 처리
    }, 1000);
    });
    return promise;
    }
    
    async function runTasks() {
    	try { // try/catch 구문을 사용하여 에러를 처리합니다.
        	let result = await increase(0);
            console.log(result);
            result = await increase(result);
            console.log(result);
            result = await increase(result);
            console.log(result);
            result = await increase(result);
            console.log(result);
            result = await increase(result);
            console.log(result);
        } catch (e) {
        	console.log(e);
        }
    }