콜백 지옥

자바스크립트는 비동기 처리를 위해 콜백함수를 이용합니다.

간단한 예시를 들어볼게요

// 함수 선언
function findingUser(id, callbackFn) {
	setTimeout(function() {
		console.log('유저 찾는데 2초 걸려요');
		const user = {
			id: id,
			email: id + "@gmail.com",
		};

		return callBackFn(user);
	}, 200);
}

// 함수 호출
findingUser("Lee", function() {
	console.log("user is " + user); 
});

함수 선언부에서 콜백함수를 통해서 비동기 처리를 합니다. 콜백함수를 다른 함수의 인자로 넣어서 처리를 하고 있음을 알 수 있습니다.

• id값을 받아 2초 후에 user라는 객체를 리턴하여, 인자로 받는 콜백함수에 user객체를 넣어 바로 실행시켜 user값을 보여줍니다.

그렇지만, 코드가 한 눈에 잘 들어오지 않기도 하고, 만약 수행할 것들이 많다면, 콜백함수 루프에 빠지게 됩니다.

그래서 이러한 점을 해결하고자 등장한 것이 Promise 개념입니다.

언제 주로 사용할까?

데이터를 얻는 경우에 많이 사용하게 됩니다.

데이터를 얻는데까지 약간의 지연이 있을 경우, 바로 데이터를 받아오지는 못하지만, 곧 넘어올 데이터입니다. 이런 경우에 접근하기 위한 방법을 Promise는 제공합니다.

윗 코드들을 다시 Promise객체를 이용해 바꿔보겠습니다.

function findingUser(id) {
	return new Promise(function (resolve) {
		setTimeout(function() {
			console.log("데이터 가져오는데 2초 걸립니다.");
			const user = {
				id: id,
				email: id + "@gmail.com",
			};
		};
		resolve(user);
	}, 200);
}

findingUser("Lee").then(function(user) {
	console.log("user": user);
});

Promise 구조

resolve, reject라는 2개의 함수 인자를 받고, new키워드와 함께 객체를 생성합니다.