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;
}
};위 태그 명을 업데이트 하는 함수에서 확인해보면
위와 같이 메뉴 id 가 인덱스 값 1로 들어간 것을 확인할 수 있다. 따라서 우리는 그 유니크한 태그의 id 값을 넣어줌으로써 DOM에 원하는 태그를 조작할때 유용하게 사용할 수 있다.
참조 사이트
문벅스 강좌 https://blog.makerjun.com/blackcoffee/moonbucks-guidebook