Callback / Promise

Callback

Callback 함수란 다른 함수의 인자로 이용되거나 이벤트에 의해 호출되는 함수를 말한다.

• 다른 함수의 인자로 이용되는 콜백 함수 예시

function add (x, y, callback){
	let result = x * y
	callback(result)
}

function result (data) {
	console.log(data, "콜백함수 실행")
}

add(5, 10, result)

add 함수를 실행하면 add 함수 안에서 인자로 들어간 result 함수가 실행되며, 여기서 result 함수를 callback 함수라고 부른다.

---

• 이벤트에 의해 호출되어지는 콜백 함수 예시

<button onClick={handleClickFunction}></button>

button을 클릭하면 onClick 함수가 실행되고, onClick 함수 에서는 다시 handleClickFunction 함수가 실행되는데, 여기서 handleClickFunction 함수를 callback 함수라고 부른다.

---

• 동기적 & 비동기적 Callback

동기적 방식 : 현재 실행 중인 코드가 완료된 후 다음 코드를 실행
예시 : async/await를 이용하여 함수에 적용!
비동기적 방식 : 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행
예시 : setTimeout

Promise

콜백 함수의 양이 많아지고 들여쓰기 수준이 과도하게 깊어지는(콜백 지옥)을 해결하기 위해 ES6 에서 자바스크립트에 새로 추가된 기능이다.
요청한 데이터의 값을 받아오기 전에 응답을 하는 자바스크립트의 특성을 보안하여 데이터의 값을 주기로 약속해 주는 것!!