어제, 오늘 그리고 내일

이번 포스팅은 Vue.js에서 뷰 인스턴스에 대하여 알아보도록 하겠습니다.

#1. 뷰 인스턴스의 정의와 속성

뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위입니다. 인스턴스는 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건입니다.

뷰 인스턴스 생성

뷰 인스턴스를 사용하기 위해 아래쪽과 같은 형식으로 뷰 인스턴스를 생성합니다. 

그럼 'Hello Vue.js' 샘플 코드에서 인스턴스와 관계된 부분을 다시 한번 살펴보도록 하겠습니다.

먼저 'Hello Vue.js' 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였습니다. 그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message값을 정의하여 화면의 {{ message }}에 연결하였습니다. 그럼 각 요소에 대해 자세히 알아보도록 하겠습니다.

뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 합니다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있습니다. 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서입니다.

※ 생성자 : 생성자는 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 기존 기능을 쉽게 확장하여 사용하는 기법입니다. 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를 재활용하기 위해 사용합니다.

#2. 뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다. 예를 들어 Hello Vue.js! 예제에서는 data라는 미리 정의되어 있는 속성을 사용하였습니다. 우리는 그 안에 message라는 새로운 속성을 추가하고 Hello Vue.js! 값을  주었을 뿐입니다. el속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미합니다. 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 Dom 요소를 지정해 주어야 합니다.

여기서 #app값은 화면의 Dom요소 중 app 이라는 id를 가진 요소를 의미합니다. 여기서 사용한 # 선택자는 CSS 선택자 규칙과 같습니다

※ CSS 선택자 중 # 선택자는 해당 id를 가진 Dom 요소를 검색할 때 사용합니다. 그리고 .선택자는 해당 클래스를 가진 Dom 요소를 검색할 때 사용합니다.

이 외 에도 template, methods, created 등 미리 정의되어 있는 속성을 사용할 수 있습니다.

#3. 뷰 인스턴스의 유효 범위

인스턴스의 유효 범위

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타납니다. 이를 인스턴스의 유효 범위라고 합니다. 인스턴스의 유효 범위는 el 속성과 밀접한 관계가 있습니다.

인스턴스의 유효 범위를 이해하려면 인스턴스가 생성된 후 화면에 어떻게 적용되는지 알아야 합니다. new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정은 다음과 같습니다.

이 과정을 이해하기 위해서 Hello Vue.js 샘플 코드의 인스턴스 정의 부분(노란색 음영 부분)을 자세히 살펴보겠습니다.

먼저 자바스크립트 코드 상에서 인스턴스 옵션 속성 el과 data를 인스턴스에 정의하고 new Vue()로 인스턴스를 생성합니다. 그리고 브라우저에서 위 샘플 코드를 실행하면 아래와 같이 el속성에 지정된 화면 요소(Dom)에 인스턴스가 부착됩니다.

el속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 옵션 개체의 내용(data 속성)이 el속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환됩니다.

data 속성의 message 값 Hello Vue.js가 {{ message }}와 치환됩니다.

인스턴스의 유효 범위 확인

그런데 만약 인스턴스의 유효 범위를 벗어나면 어떻게 될까요? 앞에서 살펴본 코드를 살짝 변경해 보겠습니다.

브라우저에 "{{ message }}" 라는 텍스트가 보이게 됩니다.

message 속성의 값이 Hello Vue.js!로 바뀌지 않고 그대로 출력되는 이유는 인스턴스의 유효 범위 때문입니다.

현재 코드에서 인스턴스의 유효 범위는 el속성으로 지정한 <div id="app"> 태그 아래에 오는 요소들로 제한됩니다. 따라서 <div> 태그 바깥에 있는 {{ message }}는 뷰에서 인식하지 못 하기 때문에 Hello Vue.js!로 바뀌지 않고 {{ message }} 그대로 출력이 됩니다.

Reference

1.장기효 [예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문]