뷰 인스턴스 라이프 사이클
인스턴스의 속성 중 created 처럼 인스턴스가 생성되었을 때 호출할 동작을 정의하는 속성, 이처럼 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 (life cycle) 속성이라고한다. 그리고 이때 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 합니다.
라이프 사이클 속성에는 created, beforeCreate, beforMount, mounted 등 인스턴스의 생성, 변경, 소멸과 관련되어 총 8가지가 있다.
beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계, 이 단계에서는 data속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.
created : beforeCreate 라이프 사이클 단계 다음에 실행되는 단계이다. data속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fechData()와 같은 로직들을 이용하여 data속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 다만, 아직 인스턴스가 화면요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없습니다.
beforMount : created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계입니다.
render() 함수가 호출되기 직전의 로직을 추가하기 좋습니다.
render()는 자바스크립트로 화면의 돔을 그리는 함수
mounted : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다. 다만, 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있습니다.
data == computed : ture / data === computed : false
데이터는 지역내에서 데이터를 감지해서 자동으로 데이터를 바꿔주지만 다른 컴포넌트 전역의 경우에선 자동으로 데이터를 바꿔주지 못합니다.
그렇기 때문에 computed를 사용하여 데이터를 캐싱해주는데요, computed는 전역 vuex에 데이터를 받아서 갈아끼워줍니다.
제일 중요한것은 흐름이다. 데이터가 어떻게 움직이고 받아오는지를 정확하게 이해해야한다.
한가지 오늘한 것 중 예로 파악해보자.
Vuex 데이터 흐름
@click="mapMove(d)"클릭 이벤트가 발생하게 되었을때 아래 scrpit단에서 methods: {} 안에 mapMove(d)의 함수를 실행시킵니다.
mapMove(d){
this.$store.commit('SET_CENTER_LAT_LNG', [d.lat, d.lng])
this.lcName = d.lcName
console.log(d.lcName)
},여기서 this (스코프) . $(전역)store에 접근합니다. commit은 mutations에 접근하는 방법이다. 뮤테이션으로 접근하여 () 괄호 안을 실행시킵니다.
'SET_CENTER_LAT_LNG', [d.lat, d.lng] 괄호 안을 실행 시키게 되면 Vuex 중앙관리소로 데이터를 요청하게 됩니다.
이때 store에서 접근하게 되고 그 후 mutations에 접근하게됩니다.
그 후
const mutations = {
SET_CURRENT_MENU_INDEX ( state, payload ) {
state.currentMenuIndex = payload
},
SET_CENTER_LAT_LNG (state, payload) {
state.centerLatLng = payload
},
} 뮤테이션스에서 SET_CENTER_LAT_LNG 를 통해서 state에 payload를 데이터를 호출하고 이때 state.centerLatLng 변수에 페이로드를 저장하게된다.
centerLatLng: [37.375000, 126.947787],미리 설정해둔 아래의 좌표에 접근하여 값을 대입하여 해당 동작을 하도록 설정한다.
