Vue.js 강좌 뷰 인스턴스 06

이전 강좌

2022.12.25 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 Html 요소의 속성 지정 v-bind 05

Vue.js 강좌 Html 요소의 속성 지정 v-bind 05

Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 이전 강좌 2022.12.25 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 Vue.js 강좌

ecolumbus.tistory.com

Vue Instance 뷰 인스턴스

이번 포스팅은 코딩보다는 Vue 인스턴스에 대해 개념적인 부분을 공부해 본다.

인스턴스라는 말은 프로그램이 메모리에 올라가서 실행되는 것을 의미하는 정도로 이해하시기 바란다.

1~5 강좌까지 특별하게 언급하지 않았지만 이미 우리는 인스턴스를 생성해 왔다.

복습 및 개념을 차근차근 편하게 알아보자.

인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다.

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

Vue 인스턴스(객체)의 이름가 기능등이다.

당장 이해가 되지 않더라도 개념적인 부분을 숙지하고 있자.

강좌가 진행되면서 기능을 구현하다 보면 자연스럽게 깨닫게 된다.

el : 인스턴스가 그려지는 하면의 시작점(특정 HTML 태그)
template : 화면에 표시할 요소 (HTML, CSS 등) , 템플릿과 가상 DOM을 생성
data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성.
methods : 화면의 동작과 이벤트 로직을 제어하는 속성
created : 뷰의 라이프 사이클, 생명주기라고 통상 표현한다.
watch : 뷰-모델의 데이터를 감시한다. 이벤트 루프, 옵서버 패턴이 적용.

인스턴스 라이프 사이클

뷰의 라이프 사이클을 이해해야 하는 이유는 인스턴스의 특정 시점에 원하는 로직을 구현할 수 있기 때문이다.

예를 들어, 언제 서버에서 데이터를 받아올지, 유저가 버튼을 클릭 시 어떤 부분에 분기를 태워서 HTML을 컨트롤할지.

주로 사용하는 시점 4가지는 꼭 이해해야 한다.

Creation(생성) 단계 : Vue 인스턴스가 실행된 후, 가장 처음 실행된다.
Mounting(장착) 단계 : 템플릿과 렌더링 된 Html Dom에 접근할 수 있는 단계.
Updating(수정) 단계 : 데이터가 변할고 재 렌더링이 일어난 후에 일어나는 단계
Destrucion(소멸) 단계 : 소멸 후 호출된다.

생명주기 - Life Cycle

인스턴스의 상태에 따라서 호출할 수 있는 속성들, 즉 속성마다 개발자가 추가한 커스텀 로직을 Life Cycle Hook이라고 한다.

beforeCreate
created
beforMount
mounted
beforeUpdate
updated
beforDestroy
destroyed

생명주기 흐름 코드로 확인해 보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js sample</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue.js"></script>

    <script>
        window.onload = function () {
            new Vue({
                el: "#app",
                data: {
                    msg: '안녕하세요'
                },
                created: function () {
                    console.log('created');
                },
                beforeMount: function () {
                    console.log('beforeMount');
                },
                mounted: function () {
                    console.log('mounted');
                },
                updated: function () {
                    console.log('updated');
                },
                destroyed: function () {
                    console.log('destroyed');
                },
            })
        }
    </script>
</head>
<body>
<h2>Vue.js 강좌 뷰 인스턴스 06</h2>
<div id="app">
    {{ msg }}
</div>
</body>
</html>

실행해서 콘솔을 확인해 본다.

저작자표시 비영리 변경금지

'Web Front 개발공부 > Vue.js' 카테고리의 다른 글

Vue.js 강좌 심화 양방향 바인딩 v-model 08 (0)	2022.12.27
Vue.js 강좌 양방향 바인딩 v-model 07 (0)	2022.12.27
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 (0)	2022.12.25
Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 (2)	2022.12.25
Vue.js 강좌 텍스트 바인딩, 데이터 표시 03 (2)	2022.12.24

슬기로운 개발자 생활

Vue.js 강좌 뷰 인스턴스 06