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

onUpdated()는 Vue 3에서 컴포넌트의 반응형 데이터가 업데이트되고 DOM이 다시 렌더링된 후 호출되는 생명주기 훅입니다. 컴포넌트가 DOM에 반영된 최신 상태를 기반으로 로직을 실행하거나 작업을 수행하는 데 사용됩니다. 다음과 같은 다양한 활용 사례가 있습니다.

1. DOM 조작:

• 컴포넌트의 반응형 데이터 변화에 따라 DOM 요소를 조작하는 데 사용됩니다.
• 스타일 변경, 요소 추가/삭제, 애니메이션 실행 등을 수행할 수 있습니다.
• 주의 사항: 과도한 DOM 조작은 성능 저하를 초래할 수 있으므로 필요한 작업만 수행해야 합니다.

2. 이벤트 리스너 등록/제거:

• 반응형 데이터 변화에 따라 이벤트 리스너를 동적으로 등록하거나 제거하는 데 사용됩니다.
• 특정 조건 충족 시 이벤트 처리 로직을 실행하거나, 사용하지 않는 리스너를 제거하여 성능 향상을 도모할 수 있습니다.
• 주의 사항: 메모리 누수를 방지하기 위해 사용하지 않는 리스너는 반드시 제거해야 합니다.

3. 데이터 갱신:

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

4. 사이드 이펙트 실행:

• 컴포넌트 렌더링 이후 필요한 사이드 이펙트를 실행하는 데 사용됩니다.
• API 호출, 로컬 스토리지 업데이트, 분석 도구 전송 등을 수행할 수 있습니다.
• 주의 사항: 순수한 함수를 유지하기 위해 컴포넌트 렌더링에 영향을 미치는 작업은 피해야 합니다.

onUpdated() 사용법:

import { onUpdated } from 'vue'

export default {
  setup() {
    onUpdated(() => {
      // DOM 조작, 이벤트 리스너 등록/제거, 데이터 갱신, 사이드 이펙트 실행 등을 수행
    })
  }
}

참고:

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

onUpdated() 활용 사례:

• 입력 필드의 값이 변경될 때 배경색을 변경합니다.
• 버튼 클릭 여부에 따라 툴팁을 표시/숨깁니다.
• API 호출을 통해 데이터를 로드하고 목록을 갱신합니다.
• 사용자 로그인 상태 변화에 따라 메뉴를 업데이트합니다.
• Google Analytics와 같은 분석 도구에 데이터를 전송합니다.

onUpdated() 훅은 컴포넌트가 렌더링된 후 반응형 데이터 변화에 따른 작업을 수행하는 데 유용한 도구입니다. 하지만, 성능 저하를 방지하기 위해 DOM 조작은 신중하게 수행하고, 효율적인 데이터 갱신 및 사이드 이펙트 실행 방식을 사용해야 합니다.