콜백 함수

다른 함수의 인자로 전달되는 함수를 말합니다.

function aaa(qqq){
	...함수 로직
}

aaa( funtion() { } )

aaa( () => {} ) // 이것도 가능

위 코드에서 aaa 함수의 인자로 들어가는 function(){}를 콜백 함수라고 합니다.

API 요청이 끝난 뒤 그 결과로 다른 요청을 실행해야 할 때 콜백 함수를 사용할 수 있습니다. 예시)

function aaa(qqq){
	// 외부 API에 데이터 요청하는 로직
	// ...
	// ...
	// 요청 끝!
	const result = "요청으로 받아온 데이터 결과값"
	qqq(result) // 요청 끝나면 qqq 실행시키기
}

aaa((result) => {
	console.log("요청이 끝났습니다.")
	console.log("요청으로 받아온 데이터는" + result + "입니다")
});

예시) koreaJSON 응용

/*
	1. 1-200 랜덤 수 받아오기
    2. koreanjson.com/posts/랜덤숫자
    3. 2번 작성자가 쓴 다른 게시글 모두 보기
*/

const onClickCallback = () => {
	// es5 초기 방법
    const getXML = new XMLHttpRequest();
    getXML.open("get", `http://numbersapi.com/random?min=1&max=200`); // api를 get 방식으로 호출하기
    getXML.send();
    getXML.addEventListener("load", (res) => {
    	console.log(res); // API 요청 결과
        const num = res.target.response.split(" ")[0]; // 랜덤숫자 뽑기
        const postXML = new XMLHttpRequest();
        postXML.open("get", `https://koreanjson.com/posts/${num}`);
        postXML.send();
        postXML.addEventListener("load", (res) => {
        	console.log(res);
            const userId = JSON.parse(res.target.response).UserId;
            const postUserXML = new XMLHttpRequest();
            postUserXML.open("get", `https://koreanjson.com/posts?userId=${userId}`);
            postUserXML.send();
            postUserXML.addEventListener("load", (res) => {
            	console.log(res); // 최종 API 요청 결과
        	});
    	});
	});
};

이처럼 API 호출이 중첩될수록 콜백 함수 때문에 가독성이 크게 떨어지는데, 이를 콜백 지옥이라고 합니다.

Promise

콜백 지옥 같은 문제를 해결하기 위해 나온 것이 Promise입니다.

예시) 기본 사용법

new Promise((성공했을때함수, 실패했을떄함수) => {
     try {
         // 여기서 API 요청을 한다면??
         const response = "철수";
         성공했을때함수();
     } catch (error) {
         실패했을떄함수("실패했습니다!!!");
     }
}).then(() => {
  	// 성공시
	console.log(res); // 철수
  })
	.catch(() => {
    	// 실패시
        console.log(err); // 실패했습니다!!!
    });

예시) koreaJSON 응용

const onClickPromise = () => {
	axios
    	.get(`http://numbersapi.com/random?min=1&max=200`)
        .then((res) => {
            console.log(res);
            const num = res.data.split(" ")[0]; // 랜덤숫자 뽑기
            return axios.get(`https://koreanjson.com/posts/${num}`);
	})
    .then((res) => {
        const userId = res.data.UserId;
        return axios.get(`https://koreanjson.com/posts?userId=${userId}`);
   	})
    .then((res) => {
    	// 최종결과
        console.log(res);
	});
};

Promise를 사용하면 각 요청이 체인처럼 연결되는데,

이를 **프로미스 체이닝(Promise chaining)**이라고 합니다.