created vs mounted in Vue.js :: 마이구미

이 글은 Vue.js의 라이프사이클 훅(Lifecycle Hooks)을 이해하기를 돕는다.

그 중 created와 mounted을 이해하지 않으면 발생하는 문제에 대해 작성된다.

https://kr.vuejs.org/v2/api/#created

Vue.js를 사용한다면, 라이프사이클 훅을 알고 있다고 생각한다. (라이프사이클 다이어그램)

그 중에서 created, mounted을 대부분 사용한다.

Vue 인스턴스 생성에 있어, 가장 먼저 호출되는 함수들로써, 스크립트로 보자면, window.onload 와 비슷한 느낌이 될 것이다.

공식 문서에서는 다음과 같이 설명되어있다.

created

인스턴스가 작성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. 그러나 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없습니다.

mounted

el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됩니다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면, mounted가 호출 될 때 vm.$el도 문서 안에 있게 됩니다.

공식 문서에는 el 사용 여부를 중점으로 설명되어있다.

이 말은 Virtual DOM 생성 여부와 관련이 있다. (Virtual DOM)

created와 mounted를 완벽히 이해하지 않아도, 사실상 크게 문제가 없을 수 있다.

하지만 규모가 커지면서, 컴포넌트간 통신이 있을 경우 문제가 발생할 수 있다.

먼저 부모와 자식 컴포넌트가 있을 경우, created와 mounted 호출 순서는 다음과 같다.

// Parent
export default {
    created() {
        console.log("Parent created")
    },
    mounted() {
        console.log("Parent mounted")
    }
}

// Child
export default {
    created() {
        console.log("Child created")
    },
    mounted() {
        console.log("Child mounted")
    }
}

=> Parent created
=> Child created
=> Child mounted
=> Parent mounted

created와 mounted의 호출 타이밍을 인지하지 못해, 발생하는 하나의 경우를 보자.

예를 들어, 부모에 있는 값을 자식이 동적 변화를 위해 watch를 쓸 경우이다.

// Child
export default {
    props: ['number']
    watch: {
      number () {
          console.log("watch number")
      }  
    },
    created() {
        console.log("Child created")
    },
    mounted() {
        console.log("Parent mounted")
    }
}

1. 자식에게 전달하는 값에 있어, 다음 경우는 부모에서 created 훅에서 number 값을 변경한다.

// Parent
export default {
    created() {
        this.number = 10
    },
    mounted() {

    }
}

자식에서 watch는 동작할까?

결과는 동작하지 않는다.

그 이유는 부모에서 number 값을 10으로 저장한 상태에서 자식에게 넘겨줌으로써, 자식도 number 값이 10인 상태이다.

값은 원하는 값으로 넘겼지만, 값의 변화가 일어나지 않았기 때문에 watch는 발생하지 않는다.

자식 인스턴스 생성 시에도 watch를 발생하고 싶다면 어떻게 해야할까?

다음과 같다.

// Parent
export default {
    created() {

    },
    mounted() {
        this.number = 10
    }
}

2. 부모에서 created 훅 안에서 값을 변경하는 것이 아닌 mounted에서 변경하는 것이다.

그렇다면, 처음에 초기화된 number값이 자식에 전달되고, 그 값을 통해 자식은 가지고 있다.

그리고 부모에서 mounted 훅이 일어나 값을 변경하기 때문에, 자식은 값이 변했다는 것을 인지하고 watch를 발생한다.

많은 경우 중 하나의 예로 들었지만, created와 mounted는 확실히 인지해야한다.

사용에 있어, 하나의 예로 created는 데이터 초기화에 대한 목적, mounted는 DOM 조작에 대한 목적으로 사용할 수 있다.

만약 이와 같이 예기치 못한 경우가 발생한다면, 라이프 사이클 훅에 의해 발생할 수 있으니, 확실히 이해해야한다.

전체 라이프 사이클 훅에 대해서는 다음 링크가 도움이 될 것이다.

https://alligator.io/vuejs/component-lifecycle/