저의 경험상 아직도 크지않은 규모의 회사에서 제이쿼리(jQuery)는 많이 사용하고 있는게 현실입니다.
최대한 jQuery를 사용하지 않고 Vue의 $refs
라던지, JavaScript의 DOM접근 방법을 사용하고자 하는게 저의 이상향입니다.
아마도 뷰(Vue)를 배우면 가장 부딪히는 것들이 제이쿼리의 문법들을 수정하고 리팩토링하는 작업일 것입니다.
결국 제이쿼리를 같이 사용하는 플젝은 허다할수도, 이전 개발자, 선배 개발자가 그렇게 해야만 할 수도 있습니다. 하지만, 사용을 안할 수 없는 상황이 많을 수도 있습니다.
그러면 주의할 점이라도 알고 작업하는 것이 좋습니다. 주의할 점은 Vue(뷰)의 인스턴스 라이프 사이클입니다.
뷰의 라이프 사이클은 뷰의 인스턴스(Instance)가 생성되고 소멸되기까지의 과정입니다.
라이프 사이클 훅(Life Cycle Hook)이라는 게 있는데 주로
를 주로 사용합니다.
여기서 제이쿼리의 선택자로 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 사이클에서 실행하면 아무런 반응이 없을 뿐더러 오류를 직면하게 됩니다.