[Vue.js] onMounted 훅을 활용한 컴포넌트 초기화

Vue 3에서는 Composition API가 소개되면서 onMounted라는 훅이 등장했습니다. 이 훅은 Vue 컴포넌트가 마운트된 후에 실행되는 함수를 정의할 때 사용됩니다. 이를 통해 컴포넌트 초기화 및 데이터 로딩 등의 작업을 처리할 수 있습니다.

아래는 onMounted 훅을 사용한 Vue 컴포넌트의 예제들입니다.

<template>
  <div>
    <!-- 예제 1: 데이터 로딩 -->
    <div v-if="loading">데이터를 불러오는 중...</div>
    <div v-else>
      <p v-for="item in items" :key="item.id">{{ item.name }}</p>
    </div>

    <!-- 예제 2: 초기화 작업 -->
    <p>{{ initialized ? '초기화 완료!' : '초기화 중...' }}</p>

    <!-- 예제 3: 외부 리소스 로딩 -->
    <img v-if="imageLoaded" :src="imageUrl" alt="Loaded Image" />
    <div v-else>이미지를 로딩 중입니다...</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const loading = ref(true); // 예제 1을 위한 데이터
    const items = ref([]); // 예제 1을 위한 데이터
    const initialized = ref(false); // 예제 2를 위한 데이터
    const imageLoaded = ref(false); // 예제 3을 위한 데이터
    const imageUrl = ref('https://via.placeholder.com/150'); // 예제 3을 위한 데이터

    onMounted(async () => {
      // 예제 1: 데이터 로딩
      // API 호출 등 비동기 작업 수행
      const data = await fetchData();
      items.value = data;
      loading.value = false;

      // 예제 2: 초기화 작업
      initialized.value = true;

      // 예제 3: 외부 리소스 로딩
      const image = new Image();
      image.src = imageUrl.value;
      image.onload = () => {
        imageLoaded.value = true;
      };
    });

    async function fetchData() {
      // 데이터를 가져오는 비동기 함수
      // 예를 들어 API 호출 등의 작업 수행
      return [
        { id: 1, name: '아이템 1' },
        { id: 2, name: '아이템 2' },
        { id: 3, name: '아이템 3' }
      ];
    }

    return {
      loading,
      items,
      initialized,
      imageLoaded,
      imageUrl
    };
  }
};
</script>

예제 1: 데이터 로딩

onMounted 훅을 사용하여 컴포넌트가 마운트된 후 데이터를 로딩하는 예제입니다. fetchData 함수를 통해 비동기적으로 데이터를 가져와 items에 할당하고, loading 상태를 관리합니다.

예제 2: 초기화 작업

컴포넌트가 마운트된 후 초기화 작업을 수행하는 예제입니다. initialized 상태를 관리하여 초기화 상태를 표시합니다.

예제 3: 외부 리소스 로딩

외부 리소스(이미지)를 로딩하는 예제입니다. 이미지가 로드되면 imageLoaded 상태를 업데이트하여 이미지를 화면에 표시합니다.

onMounted 훅을 이용하면 Vue 컴포넌트의 초기화 작업을 효율적으로 처리할 수 있으며, 비동기 작업을 수행할 때 유용하게 활용할 수 있습니다.