멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 41 (빌트인 / 커스텀 속성 설정)

 

목차

• 빌트인 속성과 커스텀 속성
• 속성 설정 / 읽기 / 제거
• 데이터 세트
• 오늘 하루를 돌아보며

 

빌트인 속성과 커스텀 속성

속성(attribute)은 HTML 요소에 추가된 값으로, 요소를 브라우저가 해석해서 DOM 요소 생성 과정에서 사용된다. HTML의 속성은 attributes라고 부르고, DOM의 속성은 properties라고 부른다.

<p 
  id="notice"
  class="announcement"
  data-category="event"
  contenteditable
>
  모든 태그는 여러 개의 속성을 가질 수 있습니다!
</p>

 

위 코드에서 id, class, contenteditable 속성은 HTML이 기본으로 제공하는 빌트인 속성이다. 각 속성마다 쓰임새가 다르다. data-category 속성은 사용자가 정의한 커스텀(custom) 속성이다.

 

커스텀 속성을 사용하면 요소에 대한 정보를 임의로 사용자가 저장할 수 있다.

1. 커스텀 속성을 정의할 때는 data- 접두사로 시작한다.
2. 커스텀 속성은 소문자, 숫자, 하이픈(-), 밑줄(_), 마침표(.), 콜론(:)만 포함할 수 있다.
3. 커스텀 속성에 대문자를 사용할 수 없다.

<p 
  data-user-id="27" 
  data-role="manager" 
  data-status="active"
>
  사용자 정보: 관리자 권한이 있는 활성 사용자입니다.
</p>

form 요소에서 사용하는 checked 속성은 고유하게 작동하며, 요소가 checked 속성을 포함할 경우, 항상 참인 상태다. checked 속성에 값을 할당해도 모두 참인 상태다. 속성이 없어야 거짓인 상태가 된다.

<input type="checkbox" /> <!-- 거짓인 상태 -->
<input type="checkbox" checked /> <!-- 참인 상태 -->
<input type="checkbox" checked="false" /> <!-- 참인 상태 -->

 

요소에 빌트인 또는 커스텀 속성을 설정하는 이유는 다음과 같다.

• 빌트인 속성: 빌트인 속성은 HTML 요소에 기능을 추가한다. 기본적으로는 선택 사항이며, 필요한 경우 설정할 수 있다.
• 커스텀 속성: 사용자가 지정한 속성으로 지정한 정보를 쓰거나 읽을 수 있다. 더 복잡한 컴포넌트를 만들 때 유용하다.

 

속성 설정 / 읽기 / 제거

요소에 속성을 설정(추가 또는 변경)하려면 setAttribute() 메서드를 사용한다.

요소.setAttribute('속성이름', 속성값)
요소.setAttribute('data-속성이름', 속성값) // 커스텀 속성 설정

 

요소의 속성 값을 읽으려면 getAttribute() 메서드를 사용한다.

const 속성값 = 요소.getAttribute('속성이름')
const 커스텀속성값 = 요소.getAttribute('data-속성이름') // 커스텀 속성 읽기

 

요소의 속성을 제거하려면 removeAttribute() 메서드를 사용한다.

요소.removeAttribute('속성이름')
요소.removeAttribute('data-속성이름') // 커스텀 속성 제거

 

데이터 세트

커스텀 속성을 읽거나 설정할 때 요소의 속성을 읽거나 설정할 때와 동일한 방법을 사용할 수 있지만, dataset 속성을 사용하면 더 쉽다.

// 커스텀 속성 쓰기
요소.dataset.속성이름 = '속성값'

// 커스텀 속성 읽기
console.log(요소.dataset.속성이름) // '속성값'

 

오늘 하루를 돌아보며

강사님이 과제 리뷰를 해주시면서 코드를 작성할 때는 언제나 직관적이고 이해하기 쉬워야 한다고 하셨다! 마크업이나 스타일 없이 JS 코드만 놓고 보더라도 이해할 수 있도록 코드를 명시적으로 작성하는 것은 중요하다. 함수나 변수의 이름을 내 마음대로 정했다가 나중에 다시 수정하려고 보면 그게 무슨 의미였는지, 어떤 역할을 하는지 한눈에 보기 어렵다.

 

과제를 할 때나 실습할 때부터 손에 익혀야 나중에 현업에 나가서도 직관적이고 이해하기 쉬운 코드를 짤 수 있을 것이다. 내 코드를 나만 보는 것이 아니고, 다른 사람도 볼 수 있다는 것을 기억하자! 어느 누가 보더라도 이해할 수 있도록 코드를 짜는 연습을 지금부터 하자!