[Vue] onMounted

onMounted

onMounted는 Vue 3의 Composition API에서 제공되는 훅 중 하나이다. 이 훅은 컴포넌트가 마운트된 후에 실행할 동작을 정의하는 데 사용된다.

onMounted 훅은 컴포넌트가 화면에 렌더링되고 DOM에 추가된 직후에 실행되는 콜백 함수를 등록한다. 즉, 컴포넌트의 초기화 단계에서 비동기 작업을 수행하거나, 외부 데이터를 가져오는 등의 작업을 처리하기에 적합한 타이밍이다.

예를 들어, onMounted를 사용하여 API 요청을 수행하고 데이터를 가져오는 코드를 작성할 수 있다.

import { onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    onMounted(async () => {
      try {
        const response = await axios.get('주소');
        // 데이터 처리 로직
      } catch (error) {
        console.error(error);
      }
    });
  }
};

위의 예제에서 onMounted 훅 내부에 비동기 함수를 작성하여 API 요청을 수행하고 응답을 처리할 수 있다. 이렇게 함으로써 컴포넌트가 마운트되고 나서 API 요청이 이루어지며, 데이터를 가져와 로직을 처리할 수 있다.

onMounted는 컴포넌트의 라이프사이클 훅인 mounted와 비슷한 역할을 수행하지만, Composition API에서 사용할 수 있는 함수형 스타일의 훅이다. 이를 통해 코드를 구조화하고 재사용 가능한 로직을 작성하는 데 도움이 된다.