jQuery vs VueJS

이 문서에서는 jQuery와 VueJS를 비교하여 추구하는 방향의 차이점을 분석한다.

jQuery 특징

jQuery는 태그를 선택하여 대부분의 작업을 시작한다. 따라서 태그를 제어하는 것에 기능의 초점이 맞춰져 있다. 별도의 추가 데이터 없이 태그의 정보 만으로 해결 가능한 상황일 경우 유용하게 사용할 수 있다.

VueJS 특징

VueJS는 백그라운드 데이터를 선언하고 상황에 맞게 단방향 또는 양방향으로 화면과 바인딩하여 사용한다. 따라서 데이터에 기반으로 한 화면 구성이 가능하다.

다양한 화면에 바인딩할 수 있는 데이터를 설정하는 영역을 제공하여 데이터를 기반으로 한 화면을 쉽게 구현할 수 있다.

VueJS에서는 대화식 웹 인터페이스를 구축하기 위하여 MVVM 패턴을 사용한다.

MVVM(Model-View-ViewModel) 구조는 Model과 View를 단방향 또는 양방향으로 연결하기 위한 구조이다. 어떠한 방식으로 연결하느냐에 따라 다양한 변화를 처리할 수 있다.

동일 프로그램 비교

input 태그에서 작성한 내용을 div 태그에 출력하는 프로그램을 각각 jQuery와 VueJS로 작성하여 비교해본다.

jQuery

<html>
    <head>
        <title>jQuery 샘플</title>
    </head>
    <body>
        <input type="text">
        <div></div>
        
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function(){
                
                //input 태그에 input 이벤트를 설정하여 값을 불러온 뒤 div에 출력
                $("input").on("input", function(){
                    var text = $(this).val();
                    $("div").text(text);
                });
                
            });
        </script>
    </body>
</html>

jQuery에서는 페이지를 만들기 위해 다음과 같은 순서로 로직을 수행한다.

input 태그를 선택하고 이벤트를 설정한다
이벤트가 발생할 때마다 input 태그의 값을 불러온다
div 태그를 선택하여 불러온 값을 출력한다.

VueJS

<html>
    <head>
        <title>VueJS 샘플</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="text">
            <div>{{text}}</div>
        </div>
        
        <script src="https://www.unpkg.com/vue"></script>
        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        text:""
                    };
                },
            });
            app.mount("#app");
        </script>
    </body>
</html>

VueJS에서는 페이지를 만들기 위해 다음과 같은 순서로 로직을 수행한다.

제어할 영역을 설정한다.
text라는 model을 정의한다
input에 v-model설정을 이용하여 양방향 연결한다.
div에 출력 구문을 이용하여 단방향 연결한다.

PreviousVue Devtools NextVue instance

Last updated 2 years ago