jQuery Callbacks - 온더테크

Contents

jQuery 콜백 (Callbacks)

콜백이란 무엇인가? (What is a Callback?)

콜백 함수는 특정 작업이 완료된 후 실행되는 함수입니다. jQuery에서는 주로 비동기 작업, 애니메이션, 이벤트 처리 등에서 콜백 함수를 사용하여 작업이 완료된 후 추가 작업을 수행할 수 있습니다.

AJAX 콜백 (AJAX Callbacks)

AJAX 요청에서 콜백 함수는 서버로부터 데이터를 성공적으로 받았거나 오류가 발생했을 때 호출됩니다.

성공 콜백 (Success Callback)

성공 콜백 함수는 AJAX 요청이 성공적으로 완료되었을 때 실행됩니다. success 옵션을 통해 지정할 수 있습니다.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        console.log('Success:', data);
        // 추가 작업 수행
    }
});

오류 콜백 (Error Callback)

오류 콜백 함수는 AJAX 요청이 실패했을 때 실행됩니다. error 옵션을 통해 지정할 수 있습니다.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error:', textStatus, errorThrown);
        // 추가 작업 수행
    }
});

완료 콜백 (Complete Callback)

완료 콜백 함수는 AJAX 요청이 성공 여부와 관계없이 완료되었을 때 실행됩니다. complete 옵션을 통해 지정할 수 있습니다.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    complete: function(jqXHR, textStatus) {
        console.log('Request completed:', textStatus);
        // 추가 작업 수행
    }
});

애니메이션 콜백 (Animation Callbacks)

jQuery 애니메이션 메서드에서도 콜백 함수를 사용할 수 있습니다. 애니메이션이 완료된 후 실행되는 콜백 함수를 지정하여 애니메이션이 끝난 후의 작업을 정의할 수 있습니다.

$('#myDiv').fadeOut(1000, function() {
    // 애니메이션 완료 후 실행할 작업
    alert('Fade out complete!');
});

이벤트 콜백 (Event Callbacks)

jQuery 이벤트 핸들러에서 콜백 함수는 특정 이벤트가 발생했을 때 실행됩니다. 이벤트 핸들러에 직접 콜백 함수를 지정하여 이벤트가 발생했을 때의 동작을 정의할 수 있습니다.

$('#myButton').click(function() {
    // 버튼 클릭 시 실행할 작업
    alert('Button clicked!');
});

콜백 함수의 사용 예제 (Callback Function Examples)

AJAX 예제

서버로부터 데이터를 가져오고, 가져온 데이터를 DOM에 삽입하는 예제입니다.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        $('#content').html(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error:', textStatus, errorThrown);
    },
    complete: function() {
        console.log('Request completed');
    }
});

애니메이션 예제

요소를 서서히 나타나게 하고, 나타난 후 메시지를 표시하는 예제입니다.

$('#myDiv').fadeIn(1000, function() {
    alert('Div is now visible');
});

이벤트 예제

버튼을 클릭했을 때 텍스트를 변경하는 예제입니다.

$('#myButton').click(function() {
    $('#myDiv').text('Button was clicked!');
});

결론 (Conclusion)

콜백 함수는 jQuery에서 비동기 작업이나 이벤트 처리 후에 실행할 작업을 정의하는 데 매우 유용합니다. AJAX 요청의 성공, 오류, 완료 시점에서의 콜백, 애니메이션이 끝난 후의 콜백, 이벤트 발생 시점의 콜백 등을 통해 다양한 상황에서 콜백 함수를 활용할 수 있습니다. 이를 통해 코드의 유연성과 반응성을 높이고, 사용자 경험을 개선할 수 있습니다.

Post Views: 171