Vue.js 특징과 인스턴스

사내 프로젝트를 Vue.js로 진행하게 되면서 초반에 스터디를 진행 후 시작하게 되었다.
프로젝트 진행 중 많은 난관에 봉착하였고, 부족한 점이 많아 초심으로 돌아가 기초부터 단단히
다져야 된다는 생각으로 다시 시작하려 한다.

목차

• Vue의 Reactivity한 특징
• Vue 인스턴스

Vue의 Reactivity

어쩌면 Reactivity함이 Vue.js의 가장 큰 특징이라고도 할 수 있을 정도로 강력한 기능이다.
사용자의 입력을 화면에 실시간으로 반응하여 보여주는 특징이다.

Javascript에 Object.defineProperty() 라는 내장 함수가 있다.
객체의 특정 속성을 동작을 재정의 하는 기능을 가지고 있는데 사용방법은 다음과 같다.

Object.defineProperty(대상 객체, 객체의 속성, {

    정의할 내용

});

vueModel이라는 객체를 만들고 직접 제어하는 코드는 다음과 같다.
(app이라는 id를 가진 div를 하나 만들고 안에 텍스트를 실시간으로 변경하는 기능을 만들자)

상위 코드 생락...
<div id="app"></div>

<script>
    let div = document.querySelector('#app');
    let viewModel = {};

    (function () {
        function init() {
            Object.defineProperty(viewModel, 'str', {
                // 속성에 접근했을 때의 동작을 정의
                get() {
                    console.log('접근');
                },
                // 속성에 값을 할당했을 때의 동작을 정의
                set(newValue) {
                    console.log('할당', newValue);
                    render(newValue);
                }
            });
        }

        function render(value) {
            div.innerHTML = value;
        }

        init();
    })();
</script>

defineProperty 함수에는 get과 set속성이 있다.
인자에 들어간 객체에 값을 가져오고 할당하는 기능이다.
화면에 들어가 브라우저 관리자 모드를 실행하고 console에서 제어하면 화면에서 값이 바로 바뀌는 것을 확인할 수 있다.

이렇게 데이터의 변화를 라이브러리에서 감지하여 화면에 즉시 그려내는 것이 Vue.js의 핵심이다.

Vue 인스턴스

기본적으로 Vue를 사용할 땐 Vue인스턴스를 반드시 생성해야한다.

new Vue();

그래야 Vue에서 제공하는 여러 기능을 사용할 수 있다.

new Vue({
	// 여러 기능 사용
});

여러 기능 중 대표적으로 몇가지를 정리하자면,

el  : 인스턴스가 그려지는 화면의 시작점

template: 화면에 표시할 요소(html, css 등)

data: 뷰의 반응성이 반영된 데이터 속성

methods: 화면의 동작과 이벤트 로직을 제어하는 메서드

created: 뷰의 라이프 사이클과 관련된 속성

watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

지금은 기능만 정의하고 사용방법은 추후 포스팅 하겠다.

이렇게 Vue의 특징과 인스턴스에 대해 알아보았다.

다음 포스팅엔 Vue의 컴포넌트와 화면 이동에 사용되는 Vue Router에 대해 알아보겠다.

출처 인프런 Vue.js 시작하기 - Age of Vue.js