jQuery로 페이지 로드 시 이벤트 자동 실행하기

 

웹 개발을 하다 보면 특정 요소의 이벤트를 페이지가 로드될 때 자동으로 실행해야 하는 경우가 있습니다. 예를 들어, 드롭다운 메뉴의 값을 기준으로 데이터를 로드하거나, 특정 초기값을 기반으로 화면에 데이터를 표시해야 할 때입니다. 이 글에서는 jQuery를 활용해 페이지 로드 시 이벤트를 자동으로 실행하는 방법을 소개합니다.

 

---

기본 이벤트 처리: 드롭다운 메뉴의 change 이벤트

먼저, 드롭다운 메뉴에서 사용자가 선택한 값을 처리하는 일반적인 코드를 살펴보겠습니다. 다음은 선택한 연도를 서버로 전달하여 연간 휴가 데이터를 업데이트하는 코드입니다.

$(document).ready(function () {
    $('#yearSelect').change(function () {
        const selectedYear = $(this).val();
        $.ajax({
            url: 'update_annual_leave.php', // 데이터 업데이트를 처리할 PHP 파일
            method: 'POST',
            data: { year: selectedYear, user_name: "<?=$user_name?>" },
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    $('#totalDays').text(response.total);
                    $('#usedDays').text(response.usedDays);
                    $('#remainingDays').text(response.remainingDays);
                } else {
                    alert('데이터를 업데이트하는 동안 오류가 발생했습니다.');
                }
            },
            error: function (jqxhr, status, error) {
                console.log(jqxhr, status, error);
                alert('서버 요청 중 오류가 발생했습니다.');
            }
        });
    });
});

이 코드는 드롭다운 메뉴에서 연도를 선택했을 때, 선택된 연도(selectedYear)를 서버로 전달하여 서버에서 해당 연도의 휴가 데이터를 가져옵니다. 성공적으로 데이터를 가져오면 화면에 총 휴가일, 사용한 휴가일, 남은 휴가일을 업데이트합니다.

하지만, 페이지 로드 직후에도 자동으로 데이터를 불러오고 싶다면 어떻게 해야 할까요?

---

페이지 로드 시 change 이벤트 자동 실행

페이지 로드 시 드롭다운 메뉴의 기본 선택값을 기준으로 데이터를 불러오려면, jQuery의 trigger 메서드를 활용할 수 있습니다. 아래는 수정된 코드입니다.

$(document).ready(function () {
    $('#yearSelect').change(function () {
        const selectedYear = $(this).val();
        $.ajax({
            url: 'update_annual_leave.php', // 데이터 업데이트를 처리할 PHP 파일
            method: 'POST',
            data: { year: selectedYear, user_name: "<?=$user_name?>" },
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    $('#totalDays').text(response.total);
                    $('#usedDays').text(response.usedDays);
                    $('#remainingDays').text(response.remainingDays);
                } else {
                    alert('데이터를 업데이트하는 동안 오류가 발생했습니다.');
                }
            },
            error: function (jqxhr, status, error) {
                console.log(jqxhr, status, error);
                alert('서버 요청 중 오류가 발생했습니다.');
            }
        });
    });

    // 페이지 로드 시 자동으로 change 이벤트 트리거
    $('#yearSelect').trigger('change');
});

$('#yearSelect').trigger('change');가 추가된 것을 확인할 수 있습니다. 이 한 줄의 코드가 페이지 로드 후 change 이벤트를 강제로 실행하게 합니다.

---

코드를 상세히 살펴보기

1. change 이벤트
   사용자가 드롭다운 메뉴에서 연도를 선택하면 change 이벤트가 실행됩니다. selectedYear 값을 서버에 전달하고, 성공적으로 데이터를 받아오면 HTML 요소의 텍스트를 업데이트합니다.
2. trigger 메서드
   trigger('change')는 특정 요소의 change 이벤트를 강제로 실행합니다. 페이지가 로드될 때, 사용자가 드롭다운 메뉴를 선택한 것처럼 동작합니다.
3. 에러 처리
   AJAX 요청 중 오류가 발생할 경우, 개발자가 디버깅할 수 있도록 콘솔에 오류를 출력하고 사용자에게 알림 메시지를 표시합니다.

---

이 방식이 유용한 상황

1. 초기값 로드
   드롭다운 메뉴가 기본값을 가질 때, 해당 기본값을 기반으로 초기 데이터를 로드해야 할 때 유용합니다.
2. 자동 업데이트
   페이지가 로드되자마자 데이터를 표시해야 하는 경우, 사용자가 불필요한 클릭을 하지 않아도 됩니다.

---

예시 결과

위 코드를 적용하면 페이지가 로드될 때 드롭다운 메뉴의 기본 선택값에 따라 데이터가 자동으로 업데이트됩니다. 이후 사용자가 다른 연도를 선택하면 다시 change 이벤트가 실행되어 데이터를 업데이트합니다.

이와 같은 기능은 대시보드, 관리 시스템, 혹은 데이터 필터링이 필요한 웹 애플리케이션에서 널리 사용됩니다. 특히, 사용자 경험을 개선하고, 페이지의 초기 로딩 상태를 명확히 하는 데 매우 효과적입니다.