뷰 라이프사이클(3)

in vue, vue 기본문법

설명

vue는 여러 종류의 라이프 사이클을 가집니다. 각각의 라이프 사이클 마다 사용자 정의 로직을 실행할수 있는 라이크 사이클 훅을 호출 합니다.


라이프사이클 훅의 종류

1. beforeCreate

인스턴스를 생성 후 가장 먼저 실행되는 라이프 사이클 단계입니다. 이 단계에서는 data및 methods 속성이 정의되어 있지 않습니다.


2. created

beforeCreate 다음 실행 단계로써 data 및 methods 속성에 접근이 가능합니다. 아직까지 화면에 부착전이기 때문에 돔 요소에 접근은 불가능합니다.

사용용도

보통 이 단계에서 서버에서 데이터를 요청하여 받아오는 로직을 수행하기에 좋습니다
이 단계부터 data나 속성 등에 접근이 가능하기 때문에 화면에 부착하기 전 data등의 속성에 값을 변경 시키는 등의 작업을 이 단계에서 진행합니다.


3. beforeMount

화면에 인스턴스를 부착하기 전 단계입니다.

사용용도

render 함수가 호출 되기 직전의 로직을 추가하기에 좋습니다.


4. mounted

화면에 인스턴스가 부착되고 난 후에 호출 되는 단계입니다. 이때 부터 template 속성에 정의한 화면요소에 대한 접근이 가능합니다. 돔에 인스턴스가 부착되자마자 바로 호출 되는 단계라서 하위 컴포넌트나 외부 라이브러리에 의해 추가 된 화면 요소들이 HTML 코드로 변환되는 시점과 다를수있습니다.

사용용도

이 단계부터 template 속성의 값이 화면에 부착되었기 때문에 돔에 접근을 할때 사용합니다.


5. beforeUpdate

: 인스턴스에 정의 된 속성이 변경되어 돔으로 화면을 다시 그리기 전 단계입니다.

아직 화면에 그려지기 전에 변경 된 데이터에 접근이 가능합니다. 이때 값을 변경하는 로직을 넣어 렌더링이 발생하더라도 트리거 되지 않습니다.


6. updated

변경 된 데이터가 화면으로 그려지고 난 후 실행되는 단계입니다. 이 단계에서 값을 변경 할 경우 무한루프에 빠질 수 있습니다.

사용용도

인스턴스의 속성 값이 변경 될때 값을 변경하는 로직을 실행해야 한다면 beforeUpdate에서 작성을 하고 updated에서는 속성 값이 변경 될때 화면 구성요소와 관련 된 작업을 이단계에 넣습니다.


7. beforeDestory

뷰 인스턴스가 파괴되기 직전에 호출 되는 단계입니다.

사용용도

뷰 인스턴스의 데이터를 삭제하기 좋은 단계입니다. 이벤트버스를 사용 할때 해당 컴포넌트가 삭제가 되어도 그대로 남아 있어서 이벤트가 여러번 실행되는 경우가 발생합니다. 해당 컴포넌트에서 이벤트버스 $on을 사용했다면 여기에서 $off 추가합시다.


8. destroyed

뷰 인스턴스가 파괴되고 난 후 호출되는 단계입니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
new Vue({
    el: '#app',
    beforeCreate() {

    },

    created() {

    },

    beforeMount() {

    },

    mounted() {

    },

    beforeUpdate() {

    },

    updated() {

    },

    beforeDestroy() {

    },

    destroyed() {

    }
})

뷰 라이프 사이클

https://kr.vuejs.org/v2/guide/instance.htm 인용

Comment and share

뷰 기본용어(2)

in vue, vue 기본문법

1. 데이터 바인딩

데이터 바인딩이란 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 말합니다. 데이터 바인딩 방법에는 v-bind, v-model등이 존재 합니다.

1
{{ 변수 }} 또한 바인딩에서 사용

2. 디렉티브

디렉티브란 v- 접두사를 가지는 모든 속성들을 의미합니다.

디렉티브 종류

1. v-if
2. v-show 
3. v-for
4. v-bind
5. v-model
6. v-on

Comment and share

뷰 시작하기(1)

in vue, vue 기본문법

Vue를 구성하는 기본적인 코드이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">{{message}}</div>
<div id="div">{{message}}</div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message : '안녕하세요. vue의 세계에 오신걸 환영합니다.'
        }
    });
</script>
</body>
</html>
1
2
3
4
5
6
7
1. 먼저 new Vue()를 통해서 vue 인스턴스를 생성 할 수 있습니다.
2. vue 인스턴스를 생성시에 옵션을 줄수있습니다
    - el은 vue와 연결할 돔의 타겟을 설정 합니다.
    - data속성은 vue 인스턴스의 데이터를 설정 할수있습니다.
    - {{}}를 이용하여 vue 인스턴스와 HTML을 바인딩 하여 data속성 중 message의 값을 설정하였습니다.  
      그래서 타겟 영역 안에 있는 {{message}}는 '안녕하세요. vue의 세계에 오신걸 환영합니다.'로 바뀐것을 확인 할수 있습니다.
      하지만 타겟 영영 밖에 있는 곳은 데이터 바인딩 처리가 되지 않아 문자 그대로 {{message}}가 출력 된것을 확인 할수 있습니다.

Comment and share

Moon Star

author.bio


author.job