Vue와 jQuery에 관하여..(feat.라이프 사이클 이해하기)

Vue와 jQuery에 관하여

뷰 개발자의 현실

저의 경험상 아직도 크지않은 규모의 회사에서 제이쿼리(jQuery)는 많이 사용하고 있는게 현실입니다.

최대한 jQuery를 사용하지 않고 Vue의 $refs라던지, JavaScript의 DOM접근 방법을 사용하고자 하는게 저의 이상향입니다.

아마도 뷰(Vue)를 배우면 가장 부딪히는 것들이 제이쿼리의 문법들을 수정하고 리팩토링하는 작업일 것입니다.

• jQuery는 DOM 객체를 쉽게 조작하고 관리할 수 있는 라이브러리입니다. 이미 Vue, React 이런 것들도 라이브러리입니다. 라이브러리를 2개 이상 쓴다는 것은 불가피하다면 어쩔 수 없지만 가급적 피하는 것이 좋습니다.
  프레임워크와 라이브러리의 차이는 애매하지만 Vue와 React는 라이브러리로 보고, Angular와 같은 것은 프레임워크로 보고 있습니다.

제이쿼리와 뷰를 같이 사용할 때 주의할 점

결국 제이쿼리를 같이 사용하는 플젝은 허다할수도, 이전 개발자, 선배 개발자가 그렇게 해야만 할 수도 있습니다. 하지만, 사용을 안할 수 없는 상황이 많을 수도 있습니다.

그러면 주의할 점이라도 알고 작업하는 것이 좋습니다. 주의할 점은 Vue(뷰)의 인스턴스 라이프 사이클입니다.

뷰의 라이프 사이클은 뷰의 인스턴스(Instance)가 생성되고 소멸되기까지의 과정입니다.

라이프 사이클 훅(Life Cycle Hook)이라는 게 있는데 주로

• created
• beforMount
• mounted

를 주로 사용합니다.

여기서 제이쿼리의 선택자로 HTML 태그를 접근할 수 있는 시점은 mounted()단계 입니다.

<template>
  <div>
    <button class="btn">click me</button>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  mounted() {
    $('.btn').click(function() {
      alert('btn Click');
    });
  }
}
</script>

위 코드는 뷰의 싱글 파일 컴포넌트(.vue 확장자) 코드 구조에서 제이쿼리를 함께 사용하는 모습입니다.

<template> 안에 HTML 태그가 있으니 제이쿼리로 항상 접근할 수 있을 것 같아보여도 그렇지 않습니다.

<template> 은 실제 돔으로 변환되기 전의 Virtual DOM 상태이기 때문에 적절한 라이프 사이클 훅에서 접근하지 않으면 접근할 수 없습니다.

VUE LIFE CYCLE HOOK

---

예를 들어, 위의 코드는 버튼을 클릭했을 때 "btn click"이라는 알럿(alert)을 띄우지만 created, beforeMounted 사이클에서 실행하면 아무런 반응이 없을 뿐더러 오류를 직면하게 됩니다.