시작하기 앞서.
- HTML5에서 도입된 데이터 속성(data-)은 HTML 요소에 추가적인 정보를 저장할 수 있게 해주는 속성입니다
- 이 속성은 렌더링 과정에서 무시되지만, JavaScript를 통해 동적으로 데이터를 처리하는 데 매우 유용합니다
데이터 속성의 특징.
- 렌더링에 영향을 미치지 않는다:
- data-로 시작하는 속성은 HTML 문서가 렌더링될 때 화면에 표시되지 않습니다. 즉, 이 속성 자체는 웹 페이지의 UI에 영향을 주지 않지만, JavaScript에서 이를 참조하여 다양한 기능을 구현할 수 있습니다.
- HTML 요소에 추가적인 정보를 저장:
- data-* 속성은 개발자가 특정 HTML 요소에 임의로 데이터를 저장하고, JavaScript를 통해 그 데이터를 사용할 수 있게 해줍니다.
구현할 내용.
<li class="item">호랑이</li>
<li class="item">사자</li>
<li class="item">펭귄</li>
# dir
2024-11-10 오후 08:16 1,128 index.html
2024-11-10 오후 08:15 1,195 script.js
2024-11-10 오후 08:02 1,436 style.css
2024-11-10 오후 08:06 34,422 사자.webp
2024-11-10 오후 08:07 30,666 펭귄.webp
2024-11-10 오후 08:06 107,240 호랑이.webp- li 태그안에 존재하는 각각의 동물을 클릭했을때, 사진이 나오도록 하고 싶습니다
- 각각의 동물에 맞는 사진이 출력이 되어야겠죠?
- 다음과 같은 파일들이 준비되어 있습니다
데이터 속성 설정.
<li data-img="./호랑이.webp" class="item">호랑이</li>
<li data-img="./사자.webp" class="item">사자</li>
<li data-img="./펭귄.webp" class="item">펭귄</li>- data-img : 데이터 속성으로서 각각 동물의 이미지 주소를 적어줍니다
dataset 객체로 이미지 가지고 오기.
const item = document.querySelectorAll(".item") # 배열로 저장 [li, li, li]
const src = item[0].dataset.img;
# console
console.log(src); # ./호랑이.webp- data- 속성으로 시작하는 모든 속성은 자동으로 dataset 객체의 속성으로 저장됩니다
클릭 이벤트 설정하기.
item[0].addEventListener('click', function(){
const src = item[0].dataset.img;
img.setAttribute('src', src)
})
item[1].addEventListener('click', function(){
const src = item[1].dataset.img;
img.setAttribute('src', src)
})
item[2].addEventListener('click', function(){
const src = item[2].dataset.img;
img.setAttribute('src', src)
})- 다음과 같은 HTML 요소의 data-img와 같은 사용자 정의 데이터는 JavaScript에서 dataset.img처럼 더 간결하고 직관적인 방식으로 접근할 수 있습니다
잠깐!
위와 같은 코드를 보신다면, "너무 비효율적인거 아닌가?" 생각하실 수 있습니다
이때, 정말 많이 사용되는 forEach문이 있습니다
당연한 얘기지만, 코드가 길어지면 복잡도는 증가하고, 페이지 렌더링 속도는 느려집니다
items.forEach(item => {
item.addEventListener('click', function(){
const src = item.dataset.img;
img.setAttribute('src', src);
})
})
forEach문은 배열의 요소를 하나씩 꺼내와서 반복문 안에 있는 내용을 반복합니다
나중에 다뤄볼 내용이지만, 너무 많이 쓰이는 친구라서 한번 언급하고 넘어가겠습니다