callback 함수

• 함수의 값을 파라미터로 넘겨줘서 파라미터 받은 함수를 특정 작업이 끝나고 나서 호출해 주는 것을 의미

work함수가 끝난 다음 어떤 작업을 하고 싶다면...?

function work(callback){
	setTimeout(() => {
		const start = Date.now();
		for(let i = 0; i < 100000000; i++){
		}
		const end = Date.now;
		console.log(end - start + 'ms');
		callback(end - start);
	}, 0)
}

consoloe.log('작업 시작');
work((ms) => {
	console.log('작업이 끝났어요!');
	console.log(ms + 'ms 걸렸다고 해요^^');
});
console.log('다음 작업');

1. consoloe.log('작업 시작'); 이 됨
2. work() 함수가 실행이 되면
3. setTimeout()이 실행이 되고
4. for루프가 돌아가고
5. console.log('다음 작업'); 이 나타남
6. end - start + 'ms'가 나타나고 끝나고 나서
7. work() 에 등록한 함수가 처음에 호출될 때 callback 파라미터로 받아왔었기 때문에 for 작업이 끝나고 나서 callback(end - start); 가 호출된다.
8. 그러면 end - start값이 (ms)로 넘어온다.
9. 이 (ms)를 함수 내부에 받아와서 console.log( ms + 'ms 걸렸다고 해요');이 출력된다.

---

지금은 단순히 연산량이 많은 작업을 비동기적으로 처리했는데, 나중에는 아래와 같은 작업들을 비동기적으로 처리하게 된다.

• Ajax Web API 요청 - 서버쪽에서 데이터를 받아와야될 때는 요청을 하고 서버에서 응답을 할 때까지 대기

• 파일 읽기 - 서버쪽에서 어떤 파일을 읽어와야 될 때

• 암호화/복호화 - 시간이 걸리는 경우가 있기 때문

• 작업 예약 - ‘몇주 후에 해야한다.’ 이런 경우에도 비동기 적으로 setTimeout을 사용해서 작업 처리

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C