뷰 인스턴스 (Vue Instance)
뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위
뷰 인스턴스 생성
new Vue({
...
});
🍀 'Hello World' 를 출력하는 코드
<html>
<head>
<title> 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 World'
}
});
</script>
</body>
</html>텍스트를 화면에 표시하기 위해
new Vue() 로 뷰 인스턴스를 생성
인스턴스 안에 el속성으로 뷰 인스턴스가 그려질 지점을 지정
data속성에 message 값을 정의하여 화면의 {{ message }} 에 연결
뷰 인스턴스 생성자
Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다
생성자를 사용하는 이유는 뷰를 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함
뷰 인스턴스 옵션 속성
Vue 인스턴스 옵션 속성은
인스턴스를 재정의할 data, el, template 등의 속성을 의미
뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 줘야 한다
<div id="app"> | new Vue({
{{ message }} | el: '#app',
</div> | });여기서 #app 값은 화면의 돔 요소 중 app 이라는 아이디를 가진 요소를 의미
여기사 사용한 # 선택자는 CSS 선택자 규칙과 같다
CSS 선택자 중 # 선택자는 해당 아이디를 가진 돔 요소를 검색할 때 사용
. 선택자는 해당 클래스를 가진 돔 요소를 검색할 때 사용
template
화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다
methods
화면 로직 제어와 관계된 메서드를정의하는 속성
마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다
created
뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
뷰 인스턴스 유효범위
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다 -> 인스턴스의 유효범위
📌 인스턴스가 생성된 후 화면에 어떻게 적용되는가?
new Vue() 로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정은 다음과 같다
- 뷰 라이브러리 파일 로딩 ->
- 인스턴스 객체 생성 (옵션 속성 포함) ->
- 특정 화면 요소에 인스턴스를 붙임 ->
- 인스턴스 내용이 화면 요소로 변환 ->
- 변환된 화면 요소를 사용자가 최종 확인
EX) Hello Vue.js 샘플 코드의 인스턴스 정의 부분을 자세히 보면...
new Vue({
el: '#app',
data: {
message: 'Hello World'
}
});
자바스크립트 코드 상에서 인스턴스 옵션 속성 el과 data를 인스턴스에 정의
new Vue()로 인스턴스 생성
브라우저에서 위 샘플 코드 실행하면 el속성에 지정한 화면 요소(돔)에 인스턴스가 부착된다
el 속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 옵션 객체의 내용(data 속성) 이 el속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환된다
data 속성의 message 값 'Hello wolrd'가 {{ message }} 와 치환된다
현재 코드에서 인스턴스의 유효범위는 el 속성으로 지정한 <div id="app"> 태그 아래에 오는 요소들로 제한된다
<div> 태그 바깥에 있는 것들은 뷰에서 인식하지 못함
뷰 인스턴스 라이프 사이클
인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 (life cycle) 속성이라고 한다
각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이브 사이클 훅(hook) 이라고 한다
라이브 사이클 속성에는 총 8개가 있다
- 부착 -> 갱신 구간은 데이터가 변경되는 경우에만 거치게 된다
beforeCreate
data 속성과 methods 속성이 아직 인스턴스에 정의 x, 돔과 같은 화면 요소에도 접근 x
created
data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계
-> this.data 또는 this.fetchData() 와 같은 로직들을 이용하여 data속성과 methods속성에 정의된 값에 접근하여 로직 실행
-> 컴포넌트가 생성되고 나서 샐행되는 단계
-> 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다
인스턴스가 화면 요소에 부착되기 전이라 template 속성에 정의된 돔 요소로 접근 x
beforeMount
template속성에 지정한 마크업 속성을 render() 함수로 변환한 수 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계
- render() : 자바스크립츠로 화면의 돔을 그리는 함수
mounted
el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계
template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 환경 요소를 제어하는 로직을 수행하기 좋은 단계
beforeUpdate
el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다
치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch속성으로 감시한다 = 데이터 관찰
관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
뷰의 반응성 : 뷰의 특징 중 하나, 코드의 변화에 따라 화면이 반사적으로 반응하여 빠르게 화면을 갱신
updated
데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계
데이터 변경으로 인한 화면 요소 변경까지 완료된 시점
데이터 변경 후 화면 요소 제어와 관련된 로직 추가하기 좋다
값을 변경하려면 computed, watch 와 같은 속성 사용해야한다 (무한 루프에 빠질 수 있기 때문에) -> beforeUpdate에 가급적 추가
변경 데이터의 화면 요소(돔)와 관련된 로직 추가하기 좋다
beforeDestroy
뷰 인스턴스가 파괴되기 직전에 호출되는 단계
인스턴스에 접근 가능
뷰 인스턴스의 데이터를 삭제하기 좋다
destroyed
뷰 인스턴스가 파괴되고 나서 호출되는 단계
뷰 인스턴스에 정의한 모든 속성 제거, 하위 선언 인스턴스들 모두 제거
'Vue.js' 카테고리의 다른 글
| [Vue.js] Options API vs Composition API (0) | 2023.02.12 |
|---|---|
| [Vue.js] 컴포넌트에 대해 (0) | 2023.02.09 |
| [Vue.js] 뷰 컴포넌트 (0) | 2022.05.01 |
| [Vue.js] Vue.js 개발 환경 설정 (0) | 2022.04.30 |
| [Vue.js] Vue.js 란 (0) | 2022.04.30 |
