비표준 속성과 `data-*` 속성 활용하기

ESH·2024년 6월 4일
JavaScript
0

JavaScript

목록 보기
1/2
post-thumbnail

비표준 속성과 data-* 속성 활용하기

이번 포스트에서는 비표준 속성을 활용하는 방법과 더 안전한 대안인 data-* 속성을 사용하는 방법에 대해 알아보겠습니다.

예제 코드 분석

HTML 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <p>할 일 : <b field="title"></b></p>
  <p>담당자 : <b field="manager"></b></p>
  <p>상태 : <b field="status"></b></p>
  <div>
    상태 변경: 
    <button class="btn" status="대기중">대기중</button>
    <button class="btn" status="진행중">진행중</button>
    <button class="btn" status="완료">완료</button>
  </div>
  <script src="index.js"></script>
</body>
</html>

JavaScript 코드 (index.js):

const fields = document.querySelectorAll('[field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.getAttribute('field');
  tag.textContent = task[field];
}

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.getAttribute('status');
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].setAttribute('status', status);
  };
}

주요 개념 정리

1. 비표준 속성 선택자로 활용

비표준 속성을 사용하여 요소를 선택할 수 있습니다.

const fields = document.querySelectorAll('[field]');

querySelectorAll('[field]')는 field 속성을 가진 모든 요소를 선택합니다.

2. 비표준 속성을 통해 값을 표시할 태그를 구분

이 부분이 가장 이해하기 어려운 부분일 수 있습니다. 따라서 각 단계별로 자세히 설명하겠습니다.

(a) 객체 정의

먼저, 객체를 정의합니다. 이 객체는 각각의 속성 값을 가지고 있습니다.

const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};
  • task 객체는 title, manager, status라는 프로퍼티를 가지고 있습니다.
  • title은 '코드 에디터 개발'
  • manager는 'CastleRing, Raccoon Lee'
  • status는 빈 문자열입니다.
(b) 태그 선택

비표준 속성을 가진 태그들을 모두 선택합니다.

const fields = document.querySelectorAll('[field]');

fields는 field 속성을 가진 모든 <b> 태그를 선택하여 NodeList 형태로 저장됩니다.

(c) 반복문을 통해 태그에 데이터 할당

for...of 반복문을 사용하여 각 태그에 데이터를 할당합니다.

for (let tag of fields) {
  const field = tag.getAttribute('field');
  tag.textContent = task[field];
}

각 부분을 자세히 살펴보겠습니다.

i. 반복문을 통한 순회
for (let tag of fields) {
  • fields는 NodeList로, for...of 반복문을 사용하여 각 태그를 tag 변수에 순차적으로 할당합니다.
  • 첫 번째 반복: tag는 <b field="title"></b>
  • 두 번째 반복: tag는 <b field="manager"></b>
  • 세 번째 반복: tag는 <b field="status"></b>
ii. 비표준 속성 값 가져오기
const field = tag.getAttribute('field');
  • getAttribute('field') 메서드를 사용하여 현재 태그의 field 속성 값을 가져옵니다.
  • 첫 번째 반복: field는 'title'
  • 두 번째 반복: field는 'manager'
  • 세 번째 반복: field는 'status'
iii. 객체의 값 가져오기
tag.textContent = task[field];

  • task[field]를 사용하여 task 객체의 해당 속성 값을 가져옵니다.

  • 첫 번째 반복: task['title']은 '코드 에디터 개발'

  • 두 번째 반복: task['manager']는 'CastleRing, Raccoon Lee'

  • 세 번째 반복: task['status']는 '' (빈 문자열)

  • tag.textContent를 사용하여 태그의 텍스트 내용을 설정합니다.

  • 첫 번째 반복: <b field="title">코드 에디터 개발</b>

  • 두 번째 반복: <b field="manager">CastleRing, Raccoon Lee</b>

  • 세 번째 반복: <b field="status"></b>

전체 동작 과정

  1. 태그 선택:

    const fields = document.querySelectorAll('[field]');
    • fields는 field 속성을 가진 모든 <b> 태그를 선택합니다.

  2. 데이터 객체 정의:

    const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};
    • task 객체는 각 프로퍼티에 대한 값을 가지고 있습니다.

  3. 반복문을 통해 각 태그에 데이터 할당:

    for (let tag of fields) {
  const field = tag.getAttribute('field'); // 'field' 속성 값을 가져옴
  tag.textContent = task[field]; // task 객체에서 해당하는 속성의 값을 가져와 텍스트로 설정
}
    • for (let tag of fields)는 fields의 각 태그를 순회합니다.
    • const field = tag.getAttribute('field');는 현재 태그의 field 속성 값을 가져옵니다.
    • tag.textContent = task[field];는 task 객체에서 field 속성 값에 해당하는 프로퍼티의 값을 가져와 태그의 텍스트로 설정합니다.

3. 스타일이나 데이터 변경에 활용

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.getAttribute('status');
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].setAttribute('status', status);
  };
}
  • querySelectorAll('.btn')를 사용하여 모든 버튼을 선택합니다.
  • 각 버튼의 status 속성 값을 가져와 클릭 이벤트 핸들러를 설정합니다.
  • 클릭 이벤트가 발생하면, fields[2]의 텍스트와 status 속성을 변경합니다.

더 안전한 방법: data-* 속성 사용

비표준 속성을 사용하면 나중에 표준으로 등록될 가능성을 고려하여 data-* 속성을 사용하는 것이 더 안전합니다.

수정된 HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <p>할 일 : <b data-field="title"></b></p>
  <p>담당자 : <b data-field="manager"></b></p>
  <p>상태 : <b data-field="status"></b></p>
  <div>
    상태 변경: 
    <button class="btn" data-status="대기중">대기중</button>
    <button class="btn" data-status="진행중">진행중</button>
    <button class="btn" data-status="완료">완료</button>
  </div>
  <script src="index.js"></script>
</body>
</html>

수정된 JavaScript 코드 (index.js)

const fields = document.querySelectorAll('[data-field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.dataset.field;
  tag.textContent = task[field];
}

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.dataset.status;
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].dataset.status = status;
  };
}

요약

  1. 비표준 속성 선택자로 활용:
    • querySelectorAll('[field]')를 사용하여 비표준 속성을 가진 요소를 선택할 수 있습니다.
    • 예: `const fields = document.querySelectorAll('[field]

');`

  1. 비표준 속성을 통해 값을 표시할 태그를 구분:

    • getAttribute('field')를 사용하여 비표준 속성 값을 가져오고, 이를 통해 객체의 값을 해당 태그에 할당할 수 있습니다.
    • 예:
      for (let tag of fields) {
  const field = tag.getAttribute('field');
  tag.textContent = task[field];
}

  2. 스타일이나 데이터 변경에 활용:

    • getAttribute와 setAttribute를 사용하여 비표준 속성 값을 가져오고 설정할 수 있습니다.
    • 예:
      for (let btn of btns) {
  const status = btn.getAttribute('status');
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].setAttribute('status', status);
  };
}

  3. 더 안전한 방법: data-* 속성 사용:

    • 비표준 속성 대신 data-* 속성을 사용하면 더 안전하게 데이터를 저장할 수 있습니다.
    • 예:
      <b data-field="title"></b>

  4. dataset 프로퍼티:

    • data-* 속성은 dataset 프로퍼티를 통해 접근할 수 있습니다.
    • 예: tag.dataset.field

이렇게 하면 비표준 속성과 data-* 속성을 사용하여 HTML 요소를 동적으로 조작하는 방법을 쉽게 이해할 수 있을 것입니다.

profile
ESH
I'm studying web front-end development.
다음 포스트

왜 `arr1 === arr2`는 false일까? JavaScript 비교 연산자 이해하기

0개의 댓글