callback/promise 의 개념

JBoB·2023년 1월 17일

Promise 란?

비동기를 처리할 수 있도록 자바스크립트안에 내장되어 있는 객체이다.
👀비동기 처리방식이란?
- 어떠한 데이터 통신을 위해 ‘요청’을 하였을 때, 어떠한 요청에 대한 ‘응답'을 기다리지 않고 다음 코드가 수행되는 처리방식을 의미한다
👀동기 처리 방식이란?
- 어떠한 데이터 통신을 위해 ‘요청'을 하였을 때, 어떠한 요청에 대한 ‘응답'을 받을 때까지 기다리다가 완료된 뒤 다음 코드가 수행되는 처리방식을 의미한다

function add (x, y) () {
 return x + y
}

add 함수에서는 인자로 x,y가 들어갑니다. 여태까지 배워온 것들을 보면 문자열,숫자열,배열,객체 등의 데이터의 인자를 넣고 있었습니다. 하지만 함수도 들어갈수 있다는걸 알 수 있습니다.

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

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

add(5, 10, result)

그리고 add 함수를 실행시키면 add 함수 안에서 인자로 들어간 다른 함수가 실행됩니다.

이럴 때 add 함수의 인자로 사용된 result 함수를 callback 함수라고 부릅니다.

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

Callback 함수는 2가지로 나눌수 있습니다.

1.동기적 함수

2.비동기적 함수

비동기적 콜백 함수의 가장 좋은 예는 settimeout 입니다.

비동기적 함수는 결과를 기다리지 않고 다음 코드를 실행하는 과정을 말합니다.

function Test () {
	console.log("3초 기다리기")
}

setTimeout(Test,3000);
console.log('이건 바로 실행')

위의 코드를 실행시킵니다.

아래처럼 결과가 나옵니다.

"이건 바로 실행"
"3초 기다리기"

분명 setTimeout()을 먼저 실행시켰지만, 아래있는 console.log()가 먼저 결과창에 보입니다. 이러한 이유는 자바스크립트 코드가 비동기적으로 코드를 실행시키기 때문입니다.

간절하고 치열하게 살자