[Vue.js] 강제 클릭이벤트 발생 (+ DOM조작 수행시 주의사항)

첫번째 li 요소에만 클릭이벤트를 걸려고 했었는데 아래 기존방식으로 하려하니 잘 안됐다.

Vue.component("stab-comp", {
    template: subdata.prodTab,
    methods:{
      test(x){
        store.commit('newChgData',x)
      }
    },
    mounted(){
        const firstEl = $(".new-prod-tab > ul > li").eq(0)
        console.log(firstEl)
        firstEl.trigger('click')
	}
});

이유가 뭔가 해서 찾아봤더니 jQuery의 사용과 Vue의 라이프사이클 훅 간에 타이밍 문제가 발생하기 때문 이었다.

일반적으로 Vue 컴포넌트의 mounted 훅은 컴포넌트의 템플릿이 렌더링되고 DOM에 마운트된 직후에 호출된다.

그러나 jQuery의 $ 함수는 DOM이 완전히 렌더링되기 이전에 호출될 수도 있다. 

따라서 jQuery를 사용하여 DOM을 선택하고 조작하려는 경우, Vue 컴포넌트의 mounted 훅 내에서는

타이밍 차이로 인해 요소의 안정적인 선택과 조작을 못할 수 있다.

 

Vue에서 DOM 조작을 수행할 때는 Vue의 핵심 개념과 기능을 활용하여 DOM 조작을 수행하는 것이 권장되며

이에 따라 아래는 수정된 코드다. 이렇게 하면 제이쿼리 사용없이도 안정적으로 동작한다.

mounted(){
      // 첫번째 li만 강제클릭 발생
      this.$nextTick(() => {
        const firstLi = this.$el.querySelector('ul > li:first-child');
        firstLi.click();
      });
    }

 

this.$nextTick()은 Vue의 다음 DOM 업데이트 사이클까지 기다리는 함수다.

Vue는 비동기적으로 DOM을 업데이트하므로, $nextTick()을 사용하여 Vue가 DOM 업데이트를 완료할 때까지 기다려야 한다.

콜백 함수 내부에서는 this.$el.querySelector('ul > li:first-child')를 사용하여 첫 번째 li 요소를 선택한다.

이때 this.$el은 아래같이 현재 Vue 컴포넌트의 루트 DOM 요소를 참조하며, querySelector() 메서드를 사용하여 CSS 선택자를 통해 원하는 DOM 요소를 선택할 수 있다. 

firstLi.click()은 선택한 첫 번째 li 요소에 대해 클릭 이벤트를 발생시키는 코드다. 이렇게 클릭 이벤트를 발생시키면 해당 li 요소에 연결된 클릭 핸들러가 실행된다. 

첫번째 li인 'ALL' 부분에만 강제클릭이 걸려서 새로고침시에도 항상 ALL 부분이 선택되어 보여진다.

Vue 컴포넌트 내에서 DOM 선택과 조작을 수행할 때는 Vue의 기능과 생태계에 적합한 방식으로 처리하는 것이 좋다.

Vue는 자체적으로 DOM 조작에 필요한 기능을 제공하며, 자바스크립트의 기본 메서드나 Vue의 내장 메서드를 사용하여

DOM 조작을 수행하는 것이 안정적이고 추천되는 방법이다.