jQuery의 Deferred 객체 설명

jQuery의 deferred 객체는 jQuery 1.5.0부터 도입된 중요한 기능으로, AJAX 요청 처리 방식을 크게 바꾸었습니다. 이 객체는 비동기 작업과 동기 작업 모두에서 콜백 함수를 관리하는 데 유용합니다.

Deferred 객체란? 웹 개발에서 종종 시간이 오래 걸리는 JavaScript 작업을 만나게 됩니다. 이러한 작업에는 AJAX 요청이나 대규모 배열 순회 등이 포함됩니다. 일반적으로 이러한 작업은 콜백 함수를 사용하여 결과를 처리합니다. 하지만 jQuery의 콜백 기능은 제한적이었고, 이를 개선하기 위해 deferred 객체가 도입되었습니다.
AJAX 작업의 체인 작성법 먼저, 전통적인 jQuery AJAX 호출 방법을 살펴보겠습니다:

$.ajax({
    url: "test.html",
    success: function() {
        alert("성공!");
    },
    error: function() {
        alert("실패!");
    }
});

위 코드에서는 success와 error 콜백 함수를 지정합니다. 1.5.0 버전 이상에서는 $.ajax()가 deferred 객체를 반환하므로, 다음과 같이 체인 형태로 작성할 수 있습니다:

$.ajax("test.html")
.done(function() { alert("성공!"); })
.fail(function() { alert("실패!"); });

여러 콜백 함수 지정 deferred 객체는 여러 콜백 함수를 자유롭게 추가할 수 있습니다. 예를 들어, AJAX 요청 성공 시 두 개의 콜백 함수를 실행하려면 다음과 같이 작성할 수 있습니다:

$.ajax("test.html")
.done(function() { alert("첫 번째 콜백!"); })
.fail(function() { alert("실패!"); })
.done(function() { alert("두 번째 콜백!"); });

여러 작업에 대한 콜백 함수 지정 다음은 $.when() 메소드를 사용하여 여러 AJAX 요청의 결과를 처리하는 방법입니다:

$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function() { alert("성공!"); })
.fail(function() { alert("실패!"); });

일반 작업의 콜백 함수 인터페이스 (상) deferred 객체는 AJAX 작업뿐만 아니라 모든 작업에 콜백 함수 인터페이스를 제공합니다. 예를 들어, 다음과 같은 시간이 오래 걸리는 작업이 있다고 가정해 보겠습니다:

var wait = function() {
    var tasks = function() {
        alert("작업 완료!");
    };
    setTimeout(tasks, 5000);
};

이 작업에 콜백 함수를 지정하려면 다음과 같이 수정해야 합니다:

var dtd = $.Deferred();
var wait = function(dtd) {
    var tasks = function() {
        alert("작업 완료!");
        dtd.resolve(); // 상태 변경
    };
    setTimeout(tasks, 5000);
    return dtd;
};

$.when(wait(dtd))
.done(function() { alert("성공!"); })
.fail(function() { alert("실패!"); });

deferred.resolve()와 deferred.reject() 메소드 deferred 객체는 "미완료", "완료", "실패" 세 가지 상태를 가집니다. dtd.resolve()는 상태를 "완료"로 변경하고, dtd.reject()는 상태를 "실패"로 변경합니다. 예를 들어:

var dtd = $.Deferred();
var wait = function(dtd) {
    var tasks = function() {
        alert("작업 완료!");
        dtd.reject(); // 상태 변경
    };
    setTimeout(tasks, 5000);
    return dtd;
};

$.when(wait(dtd))
.done(function() { alert("성공!"); })
.fail(function() { alert("실패!"); });

deferred.promise() 메소드 deferred 객체의 상태를 외부에서 변경하지 못하도록 하려면 deferred.promise() 메소드를 사용할 수 있습니다. 예를 들어:

var wait = function() {
    var dtd = $.Deferred();
    var tasks = function() {
        alert("작업 완료!");
        dtd.resolve(); // 상태 변경
    };
    setTimeout(tasks, 5000);
    return dtd.promise();
};

$.when(wait())
.done(function() { alert("성공!"); })
.fail(function() { alert("실패!"); });

일반 작업의 콜백 함수 인터페이스 (중) 또 다른 방법은 $.Deferred() 생성자를 사용하는 것입니다. 예를 들어:

$.Deferred(wait)
.done(function() { alert("성공!"); })
.fail(function() { alert("실패!"); });

일반 작업의 콜백 함수 인터페이스 (하) wait 객체에 deferred 인터페이스를 배포할 수도 있습니다. 예를 들어:

var dtd = $.Deferred();
var wait = function(dtd) {
    var tasks = function() {
        alert("작업 완료!");
        dtd.resolve(); // 상태 변경
    };
    setTimeout(tasks, 5000);
};
dtd.promise(wait);
wait.done(function() { alert("성공!"); })
.fail(function() { alert("실패!"); });
wait(dtd);

요약: deferred 객체의 메소드

$.Deferred(): deferred 객체 생성
deferred.done(): 작업 성공 시 콜백 함수 지정
deferred.fail(): 작업 실패 시 콜백 함수 지정
deferred.promise(): 상태 변경 불가능한 새로운 deferred 객체 반환 또는 인터페이스 배포
deferred.resolve(): 상태를 "완료"로 변경
deferred.reject(): 상태를 "실패"로 변경
$.when(): 여러 작업에 대한 콜백 함수 지정
deferred.then(): done()과 fail()을 합친 형태
deferred.always(): resolve() 또는 reject() 후 항상 실행

태그: jQuery AJAX deferred Promise Callback

8월 30일 15:31에 게시됨

괴물 클럽

jQuery의 Deferred 객체 설명

인기 태그