Vanilla Javscript 구현팁(dataset)

:raising_hand: 프론트엔드 개발관련 공부내용을 기록하는 포스트 입니다.

1. render 함수 구현

아래는 공부하고 있는 프로젝트에서 만든 render 함수이다. 여기서 기록해노을 내용은 dataset 함수를 통한 태그 특정하는 기능이다.

const render = (menu) => {
    const template = menu
      .map((item, index) => {
        return `<li data-menu-id="${index}" class="menu-list-item d-flex items-center py-2">
                <span class="w-100 pl-2 menu-name">${item.name}</span>
                <button
                    type="button"
                    class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
                >
                    수정
                </button>
                <button
                    type="button"
                    class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
                >
                    삭제
                </button>
                </li>`;
      })
      .join("");

위 함수에서 봐야할 내용은 바로 data-menu-id="${index}" 이다.

위 render 함수를 보면 유추할 수 있겠지만 특정 메뉴를 추가한 객체를 인자로 넣게되면 map 함수를 통해 미리 정해진 템플릿에 필요한 정보만 변경해서 DOM 에 추가하고 노출시키는 함수이다.

이때 앞서 공부한 closest 함수를 통해 가장 가까운 원하는 태그를 특정할 수 잇었고 해당 태그에 고유한 번호를 삽입하고 싶을 때 data-{원하는 인자명} 을 넣어주면 된다.

const updateMenuName = (e) => {
  // classList 로 target(사용자가 클릭한 버튼 태그)에 Class들을 끌어오고
  // contains 로 해당 list 안에 포함되어 있는지 확인한다.
  if (e.target.classList.contains("menu-edit-button")) {
    // 사용자가 클릭한 태그에서 가장 가까운 li 태그로 올라가려면
    // closest 함수를 사용하면 된다.
    const menuId = e.target.closest("li").dataset.menuId;
    console.log(e.target.closest("li").dataset);
    const $menuName = e.target.closest("li").querySelector(".menu-name");
    const changedMenuName = prompt(
      "수정할 메뉴명을 입력해 주세요",
      $menuName.innerText
    );
    this.menu[menuId].name = changedMenuName;
    store.setLocalStorage(this.menu);
    $menuName.innerText = changedMenuName;
  }
};

위 태그 명을 업데이트 하는 함수에서 확인해보면

image

위와 같이 메뉴 id 가 인덱스 값 1로 들어간 것을 확인할 수 있다. 따라서 우리는 그 유니크한 태그의 id 값을 넣어줌으로써 DOM에 원하는 태그를 조작할때 유용하게 사용할 수 있다.

참조 사이트

문벅스 강좌 https://blog.makerjun.com/blackcoffee/moonbucks-guidebook

You may also enjoy