부록 - 1
Tip 1. 뷰와 제이쿼리를 같이 사용해도 되나요?
<뷰에서 제이쿼리가 과연 필요할까?>
- 제이쿼리(jQuery)는 현재 대다수의 기업 시스템에서 활용하고 있는 자바스크립트 라이브러리이다.
- 2006년에 등장한 이래로 많은 기업에서 도입하여 기업용 시스템을 구축하였다.
- 이제 막 새로운 웹 기술로 사업용 서비스를 구축하는 스타트업을 제외하고는 대부분의 기업용 시스템이 이미 제이쿼리로 구현되어 있다 해도 과언이 아니다.
- 왜냐하면 프런트엔드 프레임워크의 대중화가 시작된 지도 얼마 되지 않았고, 웹 페이지에서 더 나은 사용자 경험을 제공하는 동적 화면 구성에 대한 수요 역시 최근에서야 높아졌기 때문이다.
- 따라서 기존 제이쿼리에 익숙한 개발자들이 뷰를 배우고 나면 실제로 개발할 때 가장 먼저 하게 되는 질문이 있다.
- 바로 '뷰와 제이쿼리를 어떻게 같이 사용하나요?'이다.
- 이 질문에 대한 해답을 알려주기 전에 먼저 고민해 봐야 하는 부분은 '뷰 프레임워크에서 제이쿼리를 반드시 사용해야 하느야?' 라는 부분이다.
- 많은 웹 개발자들이 제이쿼리를 선호하는 이유는 순수 자바스크립트에 비해 화면 돔 요소 조작과 ajax 같은 데이터 요청을 쉽게 할 수 있기 때문이다.
- 제이쿼리로 코딩하면 순수 자바스크립트를 사용할 때보다 훨씬 편하게 코딩할 수 있고 코드의 양도 확실히 줄어든다.
- 그런데 과연 이러한 제이쿼리의 특성이 뷰에서도 필요할까?
- 정답은 '뷰에서 제이쿼리는 필요 없다'이다.
- 제이쿼리처럼 뷰에서도 화면의 요소를 쉽게 접근할 수 있는 ref 속성을 제공한다.
- 또한 화면의 특정 요소 이벤트도 v-on 디렉티브로 처리할 수 있다.
- 아래는 같은 동작을 하는 코드를 각각 제이쿼리와 뷰로 구현한 것이다.
<!-- jQuery -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
</head>
<body>
<button id="btn">시작</button>
<p id="pEl"></p>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
$('#btn').click(function() {
$('#pEl').text('jQuery');
});
</script>
</html><!-- Vue -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Example</title>
</head>
<body>
<div id="app">
<button v-on:click="clickBtn">시작</button>
<p ref="pEl"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
clickBtn: function() {
this.$refs.pEl.innerText = 'Vue';
}
}
});
</script>
</body>
</html>- 두 코드 모두 [시작] 버튼을 클릭하면 <p> 태그에 제이쿼리는 'jQuery'를, 뷰는 'Vue'를 각각 삽입한다.
- 뷰와 제이쿼리 모두 <button> 태그를 클릭했을 때 이벤트를 감지하여 <p> 태그에 텍스트 값을 넣어 준다.
- 결론적으로, 제이쿼리에서 구현할 수 있는 기능이라면 뷰에서도 모두 구현할 수 있으므로 굳이 제이쿼리를 함께 사용할 필요가 없다.
<뷰와 제이쿼리의 잘못된 동거>
- 또한 뷰의 template 속성으로 화면을 렌더링하면 중간 과정에서 가상 돔이 개입한다.
- 따라서 인스턴스 라이프 사이클을 정확히 이해하지 못한 상태에서 제이쿼리와 함께 사용하면 오류가 발생하기 쉽다.
- 그 예로 아래의 코드를 살펴보자.
<template>
<div id="app">
{{ msg }}
<button id="btn">시작</button>
<p id="pEl"></p>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue.js!'
}
},
created() {
$('#btn').click(function() {
$('#pEl').text('jQuery');
});
}
}
</script>
<style>
</style>- 위 코드는 앞서 살펴봤던 제이쿼리 예제를 .vue 파일의 인스턴스 라이프 사이클 훅인 created( )에 추가하여 구현한 예제이다.
- <button> 태그를 클릭했을 때 제이쿼리로 <p> 태그에 텍스트를 삽입하는 코드이다.
- 화면에는 동일하게 [시작] 버튼이 있고, 클릭하면 <p> 태그에 텍스트 값으로 'jQuery'를 삽입해야 한다.
- 하지만 실제로 버튼을 클릭해보면 아무런 방응도 일어나지 않는다.
- 버튼이 정상적으로 동작하지 않는 이유는 3장 인스턴스 라이프 사이클에서 살펴봤던 내용을 보면 인스턴스가 생성된 시점인 created 라이프 사이클 훅에서는 아직 화면의 돔 요소에 접근할 수 없다고 하였다.
- 따라서 $('#btn')는 <template> 상에 <button id="btn">가 있더라도 코드를 실행하는 시점에서는 <button> 태그를 인식하지 못한다. 그래서 .click( ) 이벤트가 수행되지 않는다.
- 즉, 뷰와 제이쿼리의 화면 요소 접근 방식에는 서로 차이가 있기 때문에 혼용하지 않는 것이 좋다.
- 그럼 어떻게 제이쿼리로 뷰 template의 화면 요소를 조작할 수 있을까? 다음 팁에서 살펴보자.
해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.
'IT Study. > Do it! Vue.js 입문' 카테고리의 다른 글
| 부록. 지금 당장 실무에서 써먹는 Vue.js - 3 (0) | 2022.04.28 |
|---|---|
| 부록. 지금 당장 실무에서 써먹는 Vue.js - 2 (0) | 2022.04.27 |
| 7장. Vue.js 고급 개발자 되기 - 4 (0) | 2022.04.27 |
| 7장. Vue.js 고급 개발자 되기 - 3 (0) | 2022.04.27 |
| 7장. Vue.js 고급 개발자 되기 - 2 (0) | 2022.04.26 |
