FRONTEND ENGINEERING

jQuery .prop() vs .attr(): DOM 상태 제어의 핵심 원리와 실무 표준 패턴

HTML 속성(Attribute)과 DOM 프로퍼티(Property)의 기술적 차이를 명확히 분석하고, 체크박스 등 동적 UI의 데이터 무결성을 보장하는 실무 코딩 표준과 이벤트 핸들링 전략을 제시합니다.

📑 목차

• 1. Attribute와 Property의 본질적 차이
• 2. Boolean 속성 제어와 데이터 정합성
• 3. 상태 변경 시 이벤트 트리거 전략
• 4. 요약: 언제 무엇을 써야 할까?

1. Attribute와 Property의 본질적 차이

jQuery 1.6 버전 이후 명확히 구분된 .prop()와 .attr()의 차이는 단순한 문법적 선호도가 아닌, 브라우저가 문서를 해석하는 메커니즘의 차이에서 비롯됩니다. 엔터프라이즈급 애플리케이션의 안정성을 확보하려면 이 두 개념의 생명주기를 이해해야 합니다.

• Attribute (.attr()): HTML 마크업에 명시된 텍스트 그 자체입니다. 페이지가 처음 로드될 때의 초기 상태(Default Value)를 의미하며, 사용자 입력으로 값이 변해도 원본 속성값은 유지됩니다.
• Property (.prop()): 브라우저 파싱 후 메모리에 적재된 DOM 객체의 실시간 속성입니다. 사용자의 인터랙션이나 스크립트에 의해 변경되는 현재 상태(Current Value)를 대변합니다.

2. Boolean 속성 제어와 데이터 정합성

체크박스의 checked, selected, disabled와 같은 상태값은 문자열이 아닌 Boolean(True/False) 타입으로 관리되어야 합니다.

구형 방식인 .attr()을 사용할 경우, HTML 속성 문자열은 추가되지만 실제 DOM 객체의 내부 상태(Property)와 동기화되지 않는 치명적인 버그가 발생할 수 있습니다. 따라서 동적인 UI 상태를 제어할 때는 반드시 .prop() 메서드를 사용하여 데이터의 무결성(Integrity)을 보장해야 합니다.

// [권장] DOM 프로퍼티 직접 제어 (Boolean 타입 유지)
// 실제 체크박스 UI가 체크되며 상태가 동기화됨
$('#agreeCheckbox').prop('checked', true);

// [비권장] HTML 속성 문자열만 변경 (상태 동기화 실패 위험)
// HTML 태그에는 checked 속성이 붙지만, 화면상에서 체크되지 않을 수 있음
$('#agreeCheckbox').attr('checked', 'checked');

3. 상태 변경 시 이벤트 트리거 전략

스크립트를 통해 값을 강제로 변경할 경우, 브라우저는 이를 사용자의 물리적 입력으로 간주하지 않습니다. 따라서 change와 같은 이벤트 리스너가 자동으로 동작하지 않으며, 이는 유효성 검사나 UI 갱신과 같은 후속 비즈니스 로직의 누락으로 이어집니다.

이러한 사이드 이펙트를 방지하기 위해, 상태 변경 직후에는 반드시 이벤트를 수동으로 트리거(Trigger)하여 연결된 로직의 실행을 보장해야 합니다.

// 1. 상태 변경 (DOM 프로퍼티 수정)
$('#regionSelect option:eq(0)').prop('selected', true);

// 2. 이벤트 강제 발생 (연결된 비즈니스 로직 실행)
// "값이 변경되었음"을 명시적으로 알려야 다른 이벤트 리스너가 반응함
$('#regionSelect').trigger('change');

이 패턴은 레거시 시스템과 모던 브라우저 환경 모두에서 예측 가능한 동작을 보장하는 표준 접근 방식입니다.

4. 요약: 언제 무엇을 써야 할까?

💡 핵심 가이드:
1. .prop(): checked, selected, disabled 등 True/False 상태를 제어하거나, 사용자가 입력한 현재 값을 다룰 때 사용합니다.
2. .attr(): id, name, href, src 등 HTML 태그에 명시된 고정 속성값을 가져오거나 설정할 때 사용합니다.