noname02

Deferred Object 본문

Web/jQuery

Deferred Object

kimtaku 2016. 2. 1. 05:01

※내용의 정확성은 보장 못함. 비전문가인 본인이 이해하기 쉽게 정리하는 글임을 밝힘.


Deferred 객체는 여러가지 용도로 쓰인다.

jQuery API 문서를 보면


A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.


라고 설명되어있다. 즉 콜백큐, 동기/비동기 작업에 대한 성공/실패에 따른 콜백을 다룰 수 있게 한다.

대체적으로 ajax에 사용되고, 애니메이션 큐를 다룰 때도 사용된다.

콜백을 여러개 사용할 수 있다는 점에서 사용되는 것 같다. 예를들어 ajax의 경우에 sucess, fail에 대한 콜백메서드를 하나만 정의할 수 있고 animate도 콜백을 하나만 설정할 수 있다.

하지만 Deferred객체는 여러개 생성할 수 있기 때문에 콜백을 좀 더 다양하게 다룰 수 있고, 코딩도 깔끔하게 할 수 있다.


1
$.Deferred(function(deferred){ ... })
cs


Deferred 객체를 리턴한다. 즉 $.Deferred는 생성자 메서드다.

매개변수를 함수로 넘길 수 있는데 Deferred객체가 생성되기 전에 실행되는 익명함수를 설정할 수 있다. 이 익명함수의 매개변수로 전달되는 deferred는 생성되는 Deferred 자신인 this이다.



1
Deferred.resolve()
cs


Deferred객체를 resolve 한다는 것은 해당 Deferred객체를 작업 완료 상태로 만든다는 뜻이다. 이는 개발자가 직접 큐를 다룰 수 있게 해주는 것으로 다른 메서드들과 연계되어 사용된다.

매개변수로 객체 어떠한 것도 넘길 수 있는데 이는 콜백을 처리하는 메서드의 매개변수로 넘겨진다.



1
Deferred.reject()
cs


resolve와는 반대되는 개념으로 작업 실패 상태로 만드는 것이다.



1
Deferred.notify()
cs

Deferred객체를 progress 상태로 만드는 메서드다.



1
.promise()
cs


promise는 약속인데, bind된 오브젝트가 수행됐거나, 큐가 끝났거나 여튼 작업이 완료되었을 때의 약속이다.

작업이 완료되면 promise 오브젝트를 리턴한다. 즉 약속을 지켰다는 의미로 해석하면 될 것 같다.

단독으로 쓰이진 않고 여러 Deferred 관련 메서드들과 함께 쓰인다. 

대표적으로 done이 있는데, promise를 바인드하고 done이 바인드된 경우 처음 promise가 바인드 되었던 객체의 작업이 수행이 완료되면 promise를 리턴한다.


1
Deferred.promise([,target])
cs

Deferred.promise는 위의 .promise와는 다르다. 위의 promise는 jQuery에 대한 promise이고, 이 promise는 Deferred에 대한 promise인데 Deferred.promise()를 하는 경우 다른 코드가 해당 Deferred객체에 대한 resolve, reject, notify 하는 것을 방지한다. 


if target is provided, deferred.promise() will attach the methods onto it and then return this object rather than create a new one. This can be useful to attach the Promise behavior to an object that already exists.


1
$.when(deferred1, deferred2, ...)
cs


when은 매개변수로 넘어온 deferred객체에 대해 콜백메서드가 실행될 수 있는 통로를 열어준다. 

done, fail, then 등이 when과 연계되어 쓰인다.

만약 매개변수로 아무것도 넘기지 않고 .when과 같이 사용한다면 resolve된 promise를 리턴한다.



1
Deferred.done(callback1, callback2, ...)
cs


done은 Deferred Object가 resolve되었을 경우의 콜백 메서드를 정의한다. resolve에서 받은 매개변수를 사용할 수 있다.

Deferred 뿐만 아니라 ajax, get, post 등과 함께 사용이 가능하다. 왜냐하면 이들은 jqXHR 객체를 리턴하는데 이는 Deferred객체를 상속한 객체이기 때문이다.

또 promise를 리턴받는 경우도 사용 가능한데, 이는 promise 역시 Deferred를 상속한 객체이기 때문이다.

결과적으로 done은 여러 작업에 대한 수행이 완료되는 경우, 즉 여러 작업에 대한 doneCallback이 불려지는 경우의 콜백 메서드를 정의하는 것이다.



1
Deferred.fail(callback1, callback2, ...)
cs


fail은 Deferred Object가 reject되었을 경우의 콜백 메서드를 정의한다. reject에서 받은 매개변수를 사용할 수 있다.

마찬가지로 ajax, get, post등이 fail되었을 경우의 콜백 메서드도 정의할 수 있다.



1
Deferred.progress(callback1, callback2, ...)
cs

progress는 Deferred Object가 진행중일 때의 콜백 메서드를 정의한다. notify에서 받은 매개변수를 사용할 수 있다.

마찬가지로 ajax, get, post등이 진행중인 경우의 콜백 메서드도 정의할 수 있다.



1
Deferred.then(donecallback[, failcallback][, progresscallback])
cs


then은 done이 되었을 때, fail이 되었을 때, 진행중일 때 각각의 상태에 따른 콜백메서드를 정의한다.





즉 Deferred객체는 위에 정의에도 나와있듯, chainable utility로 주된 목적은 동기/비동기작업에 대한 콜백을 개발자가 예측 가능하게끔 깔끔하게 조직하기 위해 쓰인다. 

매우 중요한 개념임이 틀림없다.


Comments