2022-04-20/ 오늘의 공부

참고 자료

vue의 라이프사이클

어떤 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(lifecycle) 이라 합니다.

다시 말해, 사람의 라이프사이클 처럼 Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 일컫는 말입니다.

vue의 인스턴스는 크게

생성(create), 부착(mount), 업데이트(update), 없어지는(destroy)

과정을 겪게 되는데 이 과정에서 vue는 각각의 단계에서, vue를 사용하는 사람들을 위해 훅(Hook)을 할 수 있도록 API를 제공합니다. 일반적으로 많이 사용하는 종류는 beforeCrate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destrotyed 가 있습니다.

오늘 사용해본 mounted를 자세하게 알아보자.

마운트에 올라가다.

var app = new Vue({
    el: '#app',
    mounted(function() {
        console.log('mounted');
    })
})

일반적으로 가장 많이 사용하는 mounted훅입니다. 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로, this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능합니다.

다시 짚고 넘어가는 VueX 기초!

우리 회사에선 Vuex를 사용한다. 그렇기에 vuex에 기초내용 흐름은 꼭 확인해야한다.

컴포넌트는 일반적으로 부모-자식의 관계를 가지고 props와 event를 통해 서로의 데이터를 주고받는다고 하였다. 하지만 Vuex는 말 그대로 중앙 집중식 저장소 이기 때문에 props와 event에 얽매이지 않아도 된다.

store : 모든 데이터의 시작. $ : 전역 기호 를 사용하여 this.$store.getters 이런식으로 접근한다.
state : 변수 데이터 저장
Mutations : 동기 데이터에 접근 / commit 으로 접근 this.$store.commit으로 접근
Actions : 비동기 데이터에 접근 / dispatch 로 접근 this.$store.dispatch로 접근
Getters : state를 직접적으로 사용하면 보안에 취약함으로 getters로 접근한다.