[js] dataset을 이용하여 필터링하기

https://blogpack.tistory.com/680

HTML 데이터셋(Dataset, data-*) 속성의 이해

dataset을 이용하여 데이터를 관리하고 추가할 수 있는 코드를 보며 흥미로워서 관련된 코드를 이용하여 실제적으로 필터링을 하는 코드를 작성해 보려고 한다.

 

 

See the Pen Untitled by ektjtthsrk (@minos79) on CodePen.

코드 진행은 이러하다.

총 3개의 버튼을 html로 작성하고 버튼과 관련된 요소를 필터링하여 보여주게 된다.

 

필터링한 결과를 ul 태그밑에 하위로 li 태그로 필터링한 결과를 출력하게 된다. 

 

  <button class="button" data-age="20">20세 이상</button>
  <button class="button" data-age="30">30세 이상</button>
  <button class="button" data-age="40">40세 이상</button>
  
 
 
 document.querySelectorAll('.button').forEach((el) => {
  el.addEventListener('click', (e) => {
    onClickButton(e);
  });
});

각각의 버튼을 순환하면서 클릭이벤트가 발생하면 onClickButton 함수를 호출하게 된다.

const userDataList =[
  {name: '곰', age: 18},
  {name: '여우', age: 27},
  {name: '사자', age: 32},
  {name: '얼룩말', age: 41},
  {name: '기린', age: 56}
];



function onClickButton(e) {
  const button = e.target;
  const targetAge = button.dataset.age;
  const filterList = userDataList.filter((data) => data.age >= targetAge);
  
  updateList(filterList);
}

호출된 onClickButton 함수에서 button변수에 클릭된  e.target을 담게 되는데 console.log를 찍어보면 알겠지만 해당 버튼의 innerHTML이 담기게 된다.

 

dataset은 [ data- ] 는 접두사 같은 의미이고 실제는 뒤에 따라오는 같은 말한다. 

[ 만약 30세이상 ] 버튼을 클릭하였다면 [ <button class="button" data-age="30">30세 이상</button> ] 변수 button에는 이같이 담겨있을 것이다. 

 

const targetAge = button.dataset.age;

 

따라서 이 구문의 의미는 클릭한 button의 innerHTML 중에서 data-XXX 에서 age와 같은것의 값을 targetAge에 담으라는 의미이다.

 

 const filterList = userDataList.filter((data) => data.age >= targetAge);
 
 updateList(filterList);

이 구문은 필터링된 새 배열을 만드는 구문이다. userDataList배열 필터를 거는데 임시변수 data를 순환시켜서 age가 tatgetAge 이상의 값만 filterList 배열에 새롭게 담으라는 의미이다. 이렇게 새롭게 담긴 filterList를 담아서 updataList 함수를 호출하게 된다.

 

function updateList(filterList){
  let listHtml = '';
  
  for (const data of filterList) {
    listHtml += `<li>${data.name} : ${data.age}세</li>`;
  }
  document.querySelector('.user-list').innerHTML = listHtml;
}

 

filterList는 객체형식으로 담기게 되는데 그 안을 순환하면서 listHtml변수에 필터링 된 채로 담긴후에 웹상에 출력이 되는것이다. 여기서 많이 실수하는 것들의 있는데

  listHtml += `${변수}`

여기서 사용되는 것은 홑따옴표가 아니고 백틱이라고 키보는 숫자 1 옆의 물결모양과 함께 있는 녀석이다.

단순 문자형으로 인식되게 하는 홑따옴표가 아닌 변수형을 가져오는 코드이니 유의하길 바란다.