-
3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 1개발 공부/Do it! Vue.js 입문 2025. 5. 20. 09:00반응형
3장 - 1
"인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다."
03-1 뷰 인스턴스
<뷰 인스턴스의 정의와 속성>
- 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.
뷰 인스턴스 생성
- 뷰 인스턴스를 사용하기 위해서는 아래와 같이 뷰 인스턴스를 생성해야 한다.
new Vue({ ... })- 이전 장에서 작성한 코드를 다시 살펴보자.
<html> <head> <title>Vue Sample</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ //인스턴스 el: '#app', //el 속성 data: { // data 속성 message: 'Hello Vue.js!' } }); </script> </body> </html>- 'Hello Vue.js!' 텍스트를 화면에 표시하기 위해 new Vue( )로 뷰 인스턴스를 생성하였다. 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message 값을 정의하여 화면의 {{ message }}에 연결하였다.
뷰 인스턴스 생성자
- new Vue( )로 인스턴스를 생성할 때 Vue를 생성자라고 한다.
- Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.
- 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다.
- 생성자는 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법이다. 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를 재활용하기 위해 사용한다.
<뷰 인스턴스 옵션 속성>
- 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다.
- 이전 Hello Vue.js! 예제에서 data라는 미리 정의되어 있는 속성을 사용하였고, 그 안에 message라는 새로운 속성을 추가하고 Hello Vue.js!라는 값을 주었다.
- el 속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미한다. 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 한다.
- 앞 예제에서 el: '#app'에서 #app 값은 화면의 돔 요소 중 app이라는 아이디를 가진 요소를 의미한다. 여기서 # 선택자는 CSS 선택자 규칙과 같다.
- 이 외에다 아래와 같이 미리 정의되어 있는 속성을 사용할 수 있다.
속성 설명 template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있으며 5장 뷰 템플릿에서 자세히 설명한다. methods 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다. created 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성. 뷰 인스턴스 라이프 사이클 부분에서 추가로 설명한다. <뷰 인스턴스의 유효 범위>
인스턴스의 유효 범위란?
- 뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다.
- 이를 인스턴스의 유효 범위라고하며, 이것은 el 속성과 밀접한 관계가 있다.
- 인스턴스의 유효 범위를 이해하려면 인스턴스가 생성된 후 화면에 어떻게 적용되는지 알아야 한다.
- 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성에 적용하는 과정은 다음과 같다.
- 뷰 라이브러리 파일 로딩
- 인스턴스 객체 생성 (옵션 속성 포함)
- 특정 화면 요소에 인스턴스를 붙힘
- 인스턴스 내용이 화면 요소로 변환
- 변환된 화면 요소를 사용자가 최종 확인
- 이 과정을 이해하기 위해 Hello Vue.js! 샘플 코드의 인스턴스 정의 부분을 살펴보자.
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } });- 먼저 자바스크립트 코드 상에서 인스턴스 옵션 속성 el과 data를 인스턴스에 정의하고 new Vue( )로 인스턴스를 생성(2)한다.
- 그리고 브라우저에서 위 샘플 코드를 실행하면 el 속성에 지정한 화면 요소(돔)에 인스턴스가 부착(3)된다.
- 그 후 인스턴스에 정의한 옵션 객체의 내용(data 속성)이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환(4)된다. 즉, {{ message }}가 'Hello Vue.js!'로 치환된다.
인스턴스의 유효 범위 확인
- 만약 인스턴스의 유효 범위를 벗어나면 어떻게 될까? 코드를 살짝 변경해보자.
<div id="app"> </div> {{ message }}- 이 코드를 실행하면 message의 속성 값이 Hello Vue.js!로 바뀌지 않고 그대로 출력된다. 그 이유는 인스턴스의 유효 범위 때문이다.
- 인스턴스의 유효 범위는 el 속성으로 지정한 <div id="app"> 태그 아래에 오는 요소들로 제한된다. 따라서 <div> 태그 바깥에 있는 {{ message }}는 뷰에서 인식하지 못하기 때문이다.
<뷰 인스턴스 라이프 사이클>
- 앞에서 언급된 인스턴스 속성 중 created는 인스턴스가 생성되었을 때 호출할 동작을 정의하는 속성이며, 이처럼 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이라고 한다.
- 라이프 사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기
- 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 한다.
- 커스텀 로직 : 개발자가 임의로 작성한 추가 로직
- 라이프 사이클 속성에는 아래와 같이 총 8개가 있다.
뷰 라이프 사이클 다이어그램 - 위 그림은 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램이다.
- 라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어진다. 위 그림에서 부착 -> 갱신 구간은 데이터가 변경되는 경우에만 거치게 된다.
- 각 라이프 사이클 속성을 좀 더 자세히 알아보자.
라이프 사이클 속성 설명 beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이플 사이클 단계.
이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.created data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계.
이 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다. 서버에 데이터를 요청하는 HTTP 통신 방법은 4장에서 자세히 다룬다.
아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없다.beforeMount created 단계 이후 template 속성에 지정한 마크업 속성을 render( ) 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계.
render( ) 함수가 호출되기 직전의 로직을 추가하기 좋다.
*render( )는 자바스크립트로 화면의 돔을 그리는 함수이다.mounted el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계.
template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.
다만, 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다.
*변환되는 시점이 다를 경우 $nextTick( ) API를 활용하여 HTML 코드로 최종 파싱(변환)될 때까지 기다린 후 돔 제어 로직을 추가한다.beforeUpdate beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계.
el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시한다. 이를 데이터 관찰이라 한다.
*뷰의 반응성 : 뷰의 특징 중 하나로, 코드의 변화에 따라 화면이 반사적으로 반응하여 빠르게 화면을 갱신하는 것을 의미한다.
이 단계에서는 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않는다.updated 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계.
데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다.
이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성(5장에서 다룸)을 사용하야 한다.
따라서 데이터 값을 갱신하는 로직은 가급적 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소(돔)와 관련된 로직을 추가하는 것이 좋다.
*mounted 단계와 마찬가지로 하위 컴포넌트의 화면 요소와 외부 라이브러리에 의해 주입된 요소의 최종 변환 시점이 다를 수 있다. $nextTick( )을 사용하여 변환이 완료될 때까지 기다렸다가 로직을 추가한다.beforeDestroy 뷰 인스턴스가 파괴되기 직전에 호출되는 단계.
이 단계에서는 아직 인스턴스에 접근할 수 있고, 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.destroyed 뷰 인스턴스가 파괴되고 나서 호출되는 단계.
뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다.- 지금까지 설명한 라이프 사이클 훅이 실제로 어떻게 동작하는지 아래의 예제로 확인해보자.
<html> <head> <title>Vue Instance Lifecycle</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, beforeCreate: function() { console.log("beforeCreate"); }, created: function() { console.log("created"); }, mounted: function() { console.log("mounted"); }, updated: function() { console.log("updated"); } }); </script> </body> </html>- 위 코드는 뷰 시작하기 샘플 코드에서 라이플 사이클의 4개 속성인 beforeCreate, created, mounted, updated를 추가하고 각각 로그를 출력해보는 예제이다.
- 브라우저에서 코드를 실행하고 개발자 도구에서 'Console' 패널을 확인하면 아래와 같다.
라이프 사이클 코드 실행 결과 화면 - 로그를 보면 뷰 라이프 사이클의 흐름대로 beforeCreate, created, mounted가 표시되는 것을 확인할 수 있으나 update 속성 함수는 호출되지 않았다. 그 이유는 뷰 인스턴스에서 데이터 변경이 일어나지 않아 호출되지 않았기 때문이다.
- mounted 단계에서 기존에 정의된 data 속성의 message 값을 변경해보자.
mounted: function() { console.log("mounted"); this.message = 'Hello Vue!'; // message 값 변경 },- 위 코드로 코드를 실행하고 브라우저 화면과 'Console' 패널을 확인하면 아래와 같다.
속성을 변경한 후 코드 실행 결과 화면 - updated 로그가 출력된 것을 확인할 수 있고, 그 이유는 message의 값이 변경됨에 따라 화면에 표시되는 message 값이 갱신되었고, 이에 따라 updated 속성에 정의한 로직이 실행되었기 때문이다.
- 여기서 중요한 것은 인스턴스의 데이터가 갱신되면서 라이프 사이클 단계가 beforeUpdate, updated 단계로 진입했다는 점이다. 이처럼 각 인스턴스 라이프 사이클에 맞춰 원하는 로직을 추가하여 원하는 시점에 실행할 수 있다.
- 실습한 내용이 완전히 이해되지 않았다면 앞의 뷰 인스턴스 라이프 사이클 그림과 설명을 꼭 다시 한 번 살펴보고 다음으로 넘어가는 것이 좋다.
해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.
반응형'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글
2장. 개발 환경 설정 및 첫 번째 프로젝트 (1) 2025.05.19 1장. Vue.js 소개 (2) 2025.05.18
