vue3 아코디언 메뉴 부드럽게 열고 닫기 event.target

이전 시간에는 dom 참조 ref를 활용해서 아코디언 메뉴를 부드럽게 펼치고 닫아봤는데요 오늘은 이벤트 타겟을 활용해서 아코디언을 부드럽게 열고 닫는 기능을 적용해보겠습니다.

vue3 아코디언 기능

앞에서 포스팅한 dom ref 사용한 방식과 기능 구현 방식은 거의 동일하다고 보시면 됩니다. 

 

차이가 있다면 부드럽게 펼칠 div를 ref로 선택하는가 event.target로 선택하는가의 차이 뿐입니다.

 

앞시간에서 dom ref로 요소를 컨트롤 할 때는 아래와 같이 ref 변수를 선언해서 사용을 했는데요

let contRefs = ref([]);

 

event.target로 작업을 할 경우에는 ref 변수가 필요가 없습니다. 어떻게 보면 일반의 스크립트로만 작업을 하는 방식이기 때문에 오히려 제일 익숙한 방식일 수 있습니다.

 

전체적은 코드는 dom ref 를 활용한 작업과 동일하기 때문에 차이가 있는 부분만 간략하게 보도록 하겠습니다.

 

먼저 마크업 부분입니다.

<div 
    class="accordion-item" 
    v-for="(item, index) in items" :key="index"
>
    <button 
      @click="itemOpen(item, $event)"	//$event는 Vue가 내부적으로 자동 제공하는 실제 이벤트 객체
    >
      {{ index+1 }}번 {{item.title}}
    </button>
    <div 
      class="cont"
      v-show="item.isOpen" 
    >
      <div v-html="item.content"></div>
    </div>
</div>

 

위 코드를 보면 열기 버튼을 클릭 할 때 해당 요소의 element와 $event를 itemOpen 함수에 인자로 넘겨주고 있습니다.

 

$event를 넘겨주는 이유는 event.target를 사용하기 위함인데요 vue 탬플릿 안에서는 event라는 변수가 없기 때문에 이벤트 객체를 명시적으로 전달하기 위해서는 $event를 넘겨줘야 합니다.

 

이제 itemOpen 함수 부분을 보겠습니다.

const itemOpen = (item, event) => {
    const btn = event.target; // 클릭한 버튼
    const findEl = btn.parentElement.querySelector(".cont");	// 오픈할 요소

    if (!item.isOpen){
      item.isOpen = true;
      findEl.style.display = 'block'
      findEl.style.height = findEl.scrollHeight + 'px'
    }else{
      findEl.style.height = 0
      setTimeout(() =>{
        item.isOpen = false;
      },300)
    }
}

 

함수 매개변수로 item과 event를 설정하고 event.target를 사용해 기능을 작성합니다.

 

Es6 문법을 활용하여 findEl 변수에 내가 열고 닫으려고 하는 element를 select해줍니다.

// 클릭한 버튼(event.target)의 부모 요소를 먼저 찾고 컨트롤 할 자식요소(cont)를 찾는다
const btn = event.target; // 클릭한 버튼
const findEl = btn.parentElement.querySelector(".cont");

// 위 코드를 줄이면
const findEl = event.target.parentElement.querySelector(".cont");

 

저는 cont박스가 있는 부모 요소를 먼저 선택하고 부모 요소에서 cont박스를 찾아서 선택해주었습니다. 선택하는 방법은 여러가지가 있으니 상황에 맞게 사용하시면 됩니다. 

 

아래는 마크업 구조에 맞춰서 바로 다음 요소를 선택하는 코드입니다. 어떤 방식을 사용해도 가능합니다.

const nextEl = btn.nextElementSibling; // 바로 뒤에 있는 div를 가리킴

 

이렇게 오픈할 요소를 선택했다면 나머지 실행문은 먼저 포스팅 했던 dom ref 소스와 거의 동일합니다.

 

완성본을 보겠습니다.

 

 

코드는 변했지만 기능은 동일합니다.

 

오늘은 이벤트 타겟으로 dom을 컨트롤 하는 방법으로 기능을 구현해보았는데요 뷰에서 스크립트 작업을 하는 방법은 다양하게 존재하는데요 상황에 따라 가장 적절한 방법으로 작업을 할 수 있게끔 모든 방법에 대해서 학습을 해두시면 좋을 것 같습니다. 

 

다음 포스팅에서는 내장컴포넌트 transition을 활용해서 만드는 방법을 알아보겠습니다. 참고로 제일 편리하고 간단합니다.

 

그럼 이만😊