✏️ Javascript
반복적인 DOM 선택, 효율적으로 하기
category
✏️ Javascript
date
Apr 8, 2023
thumbnail
slug
반복적인-DOM-선택-효율적으로-하기
author
status
Public
tags
summary
type
Post
위 사진과 같이 계산기를 만들어본다고 가정해보자.
우리는 각 버튼마다 클릭 이벤트를 부여해야 한다. 만들어야 하는 화면 구성을 잘 보면 숫자가 0부터 9까지 있다.
이 경우 우리는 매우 유사한 코드를 반복적으로 사용해야 한다.
// 숫자 버튼을 누르면 어떤 숫자를 눌렀는지 텍스트를 출력하는 코드
document.querySelector('#num-0').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-1').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-2').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-3').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-4').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-5').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-6').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-7').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-8').addEventListener('click', (e) => {
console.log(e.target.textContent);
});
document.querySelector('#num-9').addEventListener('click', (e) => {
console.log(e.target.textContent);
});이 코드는 ID가 num-0 ~ num-9까지인 요소를 선택해서 각각 클릭 이벤트를 준다.
이때 코드에서 다른 점은 ID에서 num- 뒤에 붙는 숫자 뿐이다. 이를 배열로 만들어 배열 반복문인 forEach를 사용한다면 훨씬 짧게 만들 수 있다.
const numArr = Array.from({ length: 10 }, (v, i) => i);
numArr.forEach((num) =>
document.querySelector(`#num-${num}`).addEventListener('click', (e) => {
console.log(e.target.textContent);
})
);Array.from 을 이용해서 숫자 배열을 만든 후 forEach로 반복적으로 요소를 선택하게 했고, 템플릿 문자열을 통해 달라지는 부분을 변수로 사용했다.
버튼을 눌렀을 때 숫자 텍스트가 잘 출력되는 것을 볼 수 있다.
