[javascript] 콜백(callback) 함수 사용이유 ,,?

callback() 함수란 무엇이고 왜 사용하는가,,?

 

 

---

 

간단히 말하자면,

자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해  특정 시점에서 호출이 되도록 사용하는 함수이다.

 

 

javascript의 비동기 처리란 ?

 : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성.

 

 

 

 

 

 

이 특성이 어떤 문제점을 야기하냐면 , , ,

ajax통신할 때를 예로 들어 보자 ! ^_^

 

통신을 하고 받아온 data를 가지고 실행이 되어야 하는 test 함수가 있다고 가정해보자.

getData();
test();


function getData() {
      //ajax 통신
 }
 
 function test(){
       alert("test");
 }

이렇게 하면 어떻게 실행이 될까?

.

.

.

개발 초보자들은 getData() 실행하고 test() 실행이 되겠지 ! 할 거다. ( 내가 그랬다... ㅠㅠ )

하지만 자바스크립트는 비동기 처리 특성 때문에 getData()에서 ajax 통신이 끝날 때까지 기다려 주지 않는다 !!!

 

ajax 통신을 하는 시간에 이미 test() 함수가 실행이 되서 alert가 먼저 뜰 거다! 아하 ...

자바스크립트의 비동기 처리 특성을 절대 무.조.건 잊지 말고 주의하여 로직을 짜야한다는 것을 오늘 너무, 너무 ,너무  알았다 !!! ㅠㅠ

 

 

 

 

 

이런 문제를 해결해주는 함수가 callback() 함수이다 !

 

이럴 때 callback() 함수를 매개변수로 보내서 ajax통신을 성공하고 실행하라고 해주면 개발자가 원하는 순차대로 코드가 진행이 될 것이다.

getData(test);

function getData(callback) {
	$.ajax({
		type : 'POST',
		url : '/data/page/getData.do',               
		dataType : 'json',                     
		contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
		success : function(data){
			alert("ajax 통신 성공 !!");
            		callback();
        	}
	});
}

function test(){
	alert("test");
}

이렇게 하면 "ajax 통신 성공" alert가 먼저 표출되고 "test" alert가 그다음에 표출될 것이다. 

 

 

 

웹 개발을 하다 보면 콜백에 콜백이 콜백에 콜백이 무는 로직을 짜야하는 복잡한 경우도 있다 ! 

하지만 콜백을 많이 사용하다 보면 꼬여서 가독성도 떨어지고 오류 찾기도 힘들어진다 ...

그래서 유지보수할 때 힘들다는 단점을 갖고 있다 ㅠ_ㅠ

 

 

 

 

 

근데 또 요즘에는 이 문제점을 보완해서 나온 게 있다고 한다.

바로 promise함수 !! 

 

이건 더 공부해서 조만간 업데이트해야겟다! 

암튼 오늘은 순차처리 헷갈려서 로직 구현의 오류가 있었지만 callback() 함수 사용으로 오류 해결 !!! :) 힣