[Vue] Vue3에서 onMounted() 훅 사용 가이드

onMounted()는 Vue 3에서 컴포넌트가 DOM에 완전히 마운트되고 렌더링된 후 호출되는 생명주기 훅입니다. 컴포넌트가 사용자와 상호 작용하기 준비된 시점이며, 다음과 같은 다양한 작업에 활용될 수 있습니다.

1. DOM 요소 조작:

• 마운트된 DOM 요소에 대한 조작이 필요한 경우 사용됩니다.
• 스타일 동적 적용, 요소 크기 조정, 애니메이션 실행 등을 수행할 수 있습니다.
• 주의 사항: 과도한 DOM 조작은 성능 저하를 초래할 수 있으므로 필요한 작업만 수행해야 합니다.

2. 이벤트 리스너 등록:

• 컴포넌트 내 DOM 요소에 이벤트 리스너를 등록하는 데 사용됩니다.
• 클릭, 마우스 오버, 스크롤 등 사용자 상호 작용을 감지하고 처리할 수 있습니다.
• 주의 사항: 이벤트 리스너는 메모리 누수를 유발할 수 있으므로 사용하지 않는 리스너는 반드시 제거해야 합니다.

3. 타사 라이브러리 연동:

• 컴포넌트 기능 확장을 위해 타사 라이브러리를 연동하는 데 사용됩니다.
• 분석 도구, 광고 스크립트, 지도 API 등을 활용할 수 있습니다.
• 주의 사항: 타사 라이브러리는 컴포넌트 렌더링 성능에 영향을 줄 수 있음을 인지해야 합니다.

4. 데이터 갱신:

• 컴포넌트 마운트 후 서버로부터 데이터를 갱신하거나 계산된 속성을 업데이트하는 데 사용됩니다.
• 최신 데이터를 기반으로 렌더링을 유지하고 사용자에게 정확한 정보를 제공합니다.
• 주의 사항: 데이터 갱신 작업이 빈번하게 발생하면 성능 저하를 초래할 수 있으므로 효율적인 방식으로 수행해야 합니다.

onMounted() 사용법:

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // DOM 조작, 이벤트 리스너 등록, 라이브러리 연동, 데이터 갱신 등을 수행
    })
  }
}

참고:

• onMounted() 훅은 setup() 옵션에서만 사용할 수 있습니다.
• mounted 훅은 이전 버전의 Vue에서 사용되었으나, Vue 3에서는 onMounted() 훅으로 대체되었습니다.

onMounted() 활용 사례:

• 이미지 슬라이더를 초기화하고 자동 재생을 시작합니다.
• 댓글 플러그인을 로드하고 사용자 댓글을 표시합니다.
• 지도 API를 사용하여 지도를 컴포넌트에 렌더링하고 사용자 위치를 표시합니다.
• 서버로부터 최신 뉴스 데이터를 로드하여 뉴스 피드를 업데이트합니다.
• 사용자 로그인 상태를 확인하고 메뉴를 동적으로 변경합니다.

onMounted() 훅은 컴포넌트가 DOM에 마운트된 후 필요한 로직을 실행하는 데 유용한 도구입니다. 하지만, 성능 저하를 방지하기 위해 효율적으로 사용하고, 리스너 등록 및 데이터 갱신 작업은 신중하게 수행해야 합니다.