제이쿼리 메서드 중 attr(), prop() 차이

JAVASCRIPT

해당 포스팅에서는 자바스크립트의 제이쿼리 메서드 중 attr(), prop() 차이 에 대해 다룹니다.

JAVASCRIPT

• 자바스크립트 장단점
  
• 데이터 타입
  
• 데이터 형 변환
  
• 불변성을 유지하려면 어떻게..
  
• 프로토타입
  
• var, let, const 차이
  
• 호이스팅(Hoisting)
  
• es6 문법 특징과 차이
  
• this
  
• 제이쿼리 메서드 중 attr(), prop() 차이 ✔️
  
• 화살표 함수와 일반 함수 차이
  
• 스코프(scope)
  
• 객체 지향
  
• 클로저(closure)
  
• 타입스크립트
  
• 프로세스
  
• 스레드, 싱글 스레드
  
• 콜백 함수 / 재귀 함수 차이
  
• 콜백 지옥, 콜백 지옥을 해결하는 방법
  
• promise / 콜백 지옥
  
• ajax
  
• 함수 선언식/ 표현식 차이
  
• 이벤트 버블링 / 이벤트 캡처 예시
  
• 이벤트 위임 (Event Delegation)
  
• 렉시컬 환경
  
• 프로퍼티
  
• stack이 코드 실행할 때 queue에 미뤄두는 것
  
• 얕은 복사 / 깊은 복사
  
• 동기 / 비동기
  

jQuery의 attr()와 prop() 차이

해당 포스팅에서는 호이스팅(Hoisting)의 jQuery의 attr()와 prop() 차이 에 대해 다룹니다.

jQuery의 attr()와 prop() 차이

jQuery에서는 HTML 요소의 속성(attribute)과 속성(property)을 조작하기 위해 attr()와 prop 메서드를 사용 합니다. 이 두 메서드는 비슷하게 보이지만, 다루는 대상과 동작 방식에서 중요한 차이 가 있습니다. 이를 이해하는 것은 jQuery를 효과적으로 사용하는데 매우 중요합니다.

attr() 메서드

기본 개념

attr() 메서드는 HTML 요소의 속성을 가져오거나 설정할 때 사용 됩니다. HTML속성은 문서의 정적 구조를 나타내며, 요소가 처음 로드될 때 정의된 값 입니다.

사용 예시

속성 값 가져오기

아래 코드는 첫번쨰 <a> 요소의 href 속성 값을 가져와서 콘솔에 출력 합니다. 이 값은 HTML에서 설정된 정적 속성 값 입니다.

const hrefValue = $('a').attr('href');
console.log(hrefValue); // 링크의 href 값을 출력

속성 값 설정하기

아래 코드는 첫번쨰 <a> 요소의 href 속성 값을 https://www.example.com으로 설정 합니다. 이로 인해 해당 링크를 클릭하면 설정된 URL로 이동 합니다.

const hrefValue = $('a').attr('href');
console.log(hrefValue); // 링크의 href 값을 출력

여러 속성 설정하기

아래 코드는 첫번쨰 <img> 요소의 src와 alt 속성을 각각 image.jpg와 An image로 설정 합니다.

$('img').attr({
    src: 'image.jpg',
    alt: 'An image'
});

주의사항

attr()메서드는 요소가 처음 로드될 때 정의된 속성 값만을 반환 합니다. 만약 자바스크립트를 통해 속성 값을 동적으로 변경했다면, attr()메서드는 이를 반영하지 않습니다.

prop() 메서드

기본 개념

prop() 메서드는 HTML 요소의 속성(property)을 가져오거나 설정할 때 사용 됩니다. 속성은 요소의 현재 상태를 나타내며, DOM 객체의 프로퍼티로 관리 됩니다.

사용 예시

프로퍼티 값 가져오기

아래 코드는 첫 번쨰 <input> 요소(유형이 체크박스인)의 checked프로퍼티 값을 가져와서 콘솔에 출력 합니다. 이 값은 현재 체크박스가 체크되어 있는지 여부 를 나타냅니다.

const checked = $('input[type="checkbox"]').prop('checked');
console.log(checked); // 체크박스가 체크되어 있는지 여부를 출력

프로퍼티 값 설정하기

아래 코드는 첫 번째 <input> 요소(유형이 체크박스인)의 checked 프로퍼티 값을 true 로 설정 합니다. 이로 인해 체크박스가 체크됩니다.

$('input[type="checkbox"]').prop('checked', true);

여러 프로퍼티 설정하기

아래 코드는 모든 <input> 요소의 disabled 프로퍼티를 true로, checked 프로퍼티를 false로 설정 합니다. 이로 인해 모든 입력 요소가 비활성화되고, 체크박스는 체크 해제 됩니다.

$('input').prop({
    disabled: true,
    checked: false
});

주의사항

prop() 메서드는 요소의 현재 상태를 반영 합니다. 예를 들어, 동적으로 변경된 체크박스의 상태를 prop() 메서드를 통해 정확하게 가져올 수 있습니다.

attr()와 prop()의 차이점

대상

• attr() : HTML 속성(attribute)을 다룹니다.
• prop() : DOM 프로퍼티(property)를 다룹니다.

반환값

• attr() : 요소가 처음 로드될 때의 정적 속성 값을 반환 합니다.
• prop() : 요소의 현재 상태를 나타내는 동적 속성 값을 반환 합니다.

사용 시기

• attr() : 정적 속성 값을 가져오거나 설정할 때 사용합니다. 예를 들어, href, src, title 등.
• prop() : 동적 속성 값을 가져오거나 설정할 때 사용합니다. 예를 들어, checked, disabled, selected 등.

예시 코드

체크박스 예시

아래 예제에서, 체크박스의 checked 속성을 attr() 메서드를 사용해 가져오면 초기 HTML 속성 값을 반환 합니다. 반면, prop() 메서드를 사용하면 현재 DOM 상태 값을 반환 합니다. 체크박스 상태를 변경한 후, prop() 메서드는 변경된 상태를 반영하지만 attr() 메서드는 여전히 초기 값을 반환 합니다.

<input type="checkbox" id="checkbox" checked>

// 초기 HTML 속성 값
console.log($('#checkbox').attr('checked')); // "checked"

// 현재 DOM 상태 값
console.log($('#checkbox').prop('checked')); // true

// 체크박스의 상태를 변경
$('#checkbox').prop('checked', false);

// 변경 후 확인
console.log($('#checkbox').attr('checked')); // "checked" (변경되지 않음)
console.log($('#checkbox').prop('checked')); // false (변경됨)

링크 예시

이 예제에서는 <a> 요소의 href 속성을 attr() 메서드를 사용해 가져오고 변경합니다. attr() 메서드는 정적 HTML 속성을 조작하는 데 사용되므로, href 속성을 성공적으로 변경할 수 있습니다.

<a href="https://www.google.com">Google</a>

// 초기 href 속성 값 가져오기
console.log($('a').attr('href')); // "https://www.google.com"

// href 속성 값 변경
$('a').attr('href', 'https://www.example.com');

// 변경 후 확인
console.log($('a').attr('href')); // "https://www.example.com"

마무리

attr()와 prop() 메서드는 각각 HTML 속성과 DOM 프로퍼티를 조작하는 데 사용 됩니다. attr()는 정적 속성 을 다루고, prop()는 동적 속성 을 다룹니다. 이 두 메서드를 적절히 사용하면 jQuery로 요소의 속성과 상태를 효과적으로 관리할 수 있습니다!