created와 mounted의 차이점

Vue.js를 개발하다 보면, created와 mounted를 사용하는 경우가 있을 겁니다.

이 둘은 Vue 컴포넌트 생명주기의 특정 단계에서 호출되는 훅인데요. 적절한 상황에 이 훅들을 사용할 수 있도록 created와 mounted의 차이점에 대해 알아봅시다.

 

---

1. created

created 훅은 Vue 컴포넌트가 생성된 직후에 호출됩니다.

이는 컴포넌트의 데이터 옵션(data, computed, methods 등)가 초기화 된 상태에요.

또한, DOM이 아직 준비되지 않은 상태에서 실행하기 때문에 아직 DOM에 접근할 수 없습니다.

그렇기에 created 훅은 화면 렌더링과 관계없는 로직에 사용해야 해요.

 

created는 Vue 컴포넌트가 생성되면 먼저 data, props, methods, computed 등이 정의되고 반응형으로 초기화 된 후, created 훅이 호출됩니다.

 

created는 비동기 데이터 호출 or 초기 데이터 설정에 주로 사용됩니다.

 

예를 한번 들어볼께요.

<template>
  <div>
    <h1>{{ message }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      items: []
    };
  },
  created() {
    // API 호출 예시
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 예시로 간단한 데이터
      this.items = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ];
      
      // 실제로는 axios나 fetch를 사용하여 API에서 데이터를 불러올 수 있음
      // axios.get('https://api.example.com/items')
      //   .then(response => {
      //     this.items = response.data;
      //   });
    }
  }
};
</script>

 

위 코드처럼 created 훅은 컴포넌트가 생성될 때, fetchData 메서드를 호출하여, 초기 데이터를 설정해요. 이렇게 하면, 페이지가 로드되자마자 필요한 데이터를 준비할 수 있습니다.

 

---

2. mounted

mounted 훅은 Vue가 데이터를 바인딩하고 템플릿을 렌더링하여 DOM을 생성하면, 이 DOM이 실제 HTML 문서에 삽입된 후, 호출됩니다.

this.$el을 사용하여 컴포넌트의 루트 DOM 엘리먼트에 접근이 가능하며, 초기화된 DOM에 대해 조작을 수행할 수 있어요.

또한, 차트 라이브러리 or 슬라이더 같은 플러그인을 DOM에 적용할 수 있습니다.

 

하지만, 렌더링 시간이 길어지는 작업은 피해야 합니다. mounted 훅이 DOM을 실제 HTML 문서에 삽입하는 과정이 길어져, 화면이 늦게 보일 수 있어요.

 

예를 들어보겠습니다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <div ref="myElement">이 요소에 대해 작업을 수행</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Mounted 예시'
    };
  },
  mounted() {
    // DOM 조작 예시
    this.$refs.myElement.style.color = 'blue';
    this.$refs.myElement.textContent += ' (mounted 후 수정)';

    // 외부 라이브러리 초기화 예시
    // 예를 들어, jQuery 플러그인을 사용하고 싶을 때
    // $(this.$refs.myElement).somePlugin();
  }
};
</script>

 

위 코드에서 mounted 훅은 컴포넌트가 DOM에 마운트된 후, myElement라는 참조를 통해 해당 요소의 스타일과 내용을 수정해요. 이렇게 하면, DOM 요소에 직접 접근하고 조작할 수 있습니다.

 

---

3. created와 mounted의 차이점

그러면 이제 이 둘의 차이점에 대해 알아봐야 겠죠.

created와 mounted는 호출 순서의 차이가 있습니다.

created가 먼저 호출된 다음에 mounted가 호출됩니다.

 

또한, 전에 언급했다 시피 created 훅은 주로 컴포넌트의 초기 상태를 설정하거나, 데이터를 불러오는 데 사용됩니다.

mounted 훅은 DOM 기반 작업과 타사 라이브러리 초기화에 적합해요.

 

---

4. 정리하며

지금까지 created와 mounted의 차이에 대해 알아보았습니다.

이 두 훅의 역할을 명확히 구분하면, 성능과 유지보수성 모두 개선될 수 있어요.