react 공부 day 2(비동기 함수)

비동기 처리

작업 시간이 많이 필요한 작업 A를 처리하느라 다른 작업들(B,C,D, ...)이 대기하고 있는 상태라면 일단 다른 작업들을 먼저 진행하고 작업하고 작업 A와 작업 A와 연관된 작업을 이후에 처리하는 방식을 말합니다.

대표적인 예로 서버에 데이터를 요청하고 결과를 기다리는 과정입니다.
서버에 데이터를 요청하는 동안 다른 작업을 진행하다가 데이터 요청이 완료되면 본격적으로 작업을 진행합니다.

기존 자바스크립트의 비동기 함수 처리방법
기존에는 비동기 작업을 위해 지연 작업이 필요한 함수에 setTimeout() 함수를 이용했습니다.
그리고 지연 작업 완료 이후 실행되어야 하는 함수는 지연 작업 함수의 인자(콜백 함수)로 전달하여 처리했습니다.

setTimeout함수의 예시

function work1(onDone) {
	setTimeout(() => onDone('작업1 완료!'), 100);
}
function work2(onDone) {
	setTimeout(() => onDone('작업2 완료!'), 200);
}
function work3(onDone) {
	setTimeout(() => onDone('작업3 완료!'), 300);
}
function urgentWork() {
	console.log('긴급 작업');
}

work1(function (msg1) {
	console.log('done after 100ms:' + msg1);
    work2(function (msg2) {
    	console.log('done after 300ms:' + msg2);
        work3(function (msg3) {
        	console.log('done after 600ms:' + msg3);
        });
    });
});
urgentWork();

실행해보면 긴급작업 문구가 먼저 나오는데, 이는 지연함수를 기다리는 것이 아니라 바로 urgentWork() 함수가 실행되었기 때문이다.

코드를 보면 콜백 함수가 총 3개의 계단 모양으로 되어있다.
이런 형태를 흔히 콜백지옥(callback hell)이라고 하는데 보기 힘들다. 100줄이면 으뜨케..

promise

이를 해결하기 위해 ES6에서는 콜백지옥을 해결할 수 있는 비동기 함수 표현법이 추가 되었다.
고고슨 약소쿠...

promise와 비동기 함수 처리 방법

class Promise {
	constructor(fn) {
    	constr resolve = (...args) => {
        	if(typeof this.onDone === 'function') {
            	this.onDone(...args);
            }
            if(typeof this.onComplete === 'function') {
            	this.onComplete();
            }
        }
        const reject = (...args) = > {
        	if(typeof this.onError === 'function') {
            	this.onError(...args);
            }
            if(typeof this.onComplete === 'function') {
            	this.onComplete();
            }
        }
        fn(resolve, reject);
    }
    then(onDone, onError) {
    	this.onDone = onDone;
        this.onError = onError;
        return this;
    }
    catch(onError) {
    	this.onError = onError;
        return this;
    }
    finally(onComplete) {
    	this.onComplete = onComplete;
        return this;
    }
}

이게 뭐시당가... 심호흡을 크게 한번하고 코드를 크게 봤습니다..
1. 생성자를 봅니다.
2. 불변 변수로 resolve와 reject에 익명함수를 느었습니다.
3. 생성자 매개변수 fn을 마지막에 함수 호출했습니다.(매서드가 아니에요. 매서드는 앞에 .이 있어야합니당.. 진짜에용..)
4. 그리고 then, catch, finally가 있는데 자바에 try catch문 같은건가 싶네요.. 일단 넘어갑니다.

일단 요렇게만 체크하고 책 다음으로 넘어가보겠습니다. 설명을 기대하며..

Promise 객체를 생성할 때는 다음과 같이 클래스의 resolve() 함수 또는 reject()함수에 해당하는 콜백 함수를 직접 전달해야합니다.

const work1 = () =>
	new Promise((resolve) => {
    	setTimeout(() => resolve('작업1 완료!'), 100);
    });
const work2 = () =>
	new Promise((resolve) => {
    	setTimeout(() => resolve('작업2 완료!'), 200);
    });
const work3 = () =>
	new Promise((resolve) => {
    	setTimeout(() => resolve('작업3 완료!'), 300);
    });
    
function urgentWork() {
	console.log('긴급 작업');
}

const nextWorkOnDone = (msg1) => {
	console.log('done after 100ms:' + msg1);
};

work1()
	.then(nextWorkOnDone)
    .then((msg2) => {
    console.log('done after 200ms:' + msg2);
        return work3();
    })
    .then((msg3) => {
    	console.log('done after 600ms:' + msg3);
    });
urgentWork();

우선 work1 함수가 실행되고, 콘솔로그가 찍힌후에 return에 work2 함수가 실행된다.
work2 함수도 로그를 찍고 work3를 실행시킨다.
책에는 Promise 객체를 반환한다는 표현이 있는데 이게 무슨 뜻인지 잘 이해가 안간다.

코드가 100퍼센트 이해가 되지 않는다.
promise에 대한 개념과 ES6의 비동기 처리방식의 개념이 부족한거 같으니 내일은 책을 보기전에 이에 대해 정리를 해야할거 같다.