목록2024/04/26 (20)
SeouliteLab
1. 개요Vue.js 2.x에서 도입된 unmounted 훅은 컴포넌트 인스턴스가 DOM에서 제거된 후에 실행되는 라이프사이클 훅입니다. 컴포넌트 제거 후 리소스 해제, 이벤트 제거, 비동기 작업 취소 등을 수행하는 데 유용합니다.unmounted 훅은 다음과 같은 상황에서 호출됩니다.컴포넌트가 부모 컴포넌트 트리에서 제거될 때컴포넌트를 담고 있는 DOM 요소가 제거될 때2. unmounted 훅 사용 예시다음은 unmounted 훅을 사용하는 예시입니다.HTML {{ title }} 제거하기 설명:unmounted 훅은 컴포넌트 인스턴스가 DOM에서 제거된 후에 호출됩니다.훅 내에서 console.log 메시지를 출력하여 컴포넌트 제거를 확인합니다.window.removeEventLi..
1. 개요Vue.js 3.0에서 도입된 beforeUnmount 훅은 컴포넌트 인스턴스가 제거되기 직전에 실행되는 새로운 라이프사이클 훅입니다. 이 훅을 사용하여 컴포넌트 제거 작업과 관련된 리소스 해제, 이벤트 제거, 비동기 작업 취소 등을 수행할 수 있습니다.beforeUnmount 훅은 다음과 같은 상황에서 호출됩니다.컴포넌트가 부모 컴포넌트 트리에서 제거될 때컴포넌트를 담고 있는 DOM 요소가 제거될 때keepAlive 옵션이 true로 설정된 컴포넌트가 비활성화될 때2. beforeUnmount 훅 사용 예시다음은 beforeUnmount 훅을 사용하는 예시입니다.HTML {{ title }} 제거하기 설명:beforeUnmount 훅은 컴포넌트 인스턴스가 제거되기 직전에 호출..
Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. updated 훅은 데이터가 변경되고 가상 DOM이 다시 렌더링된 후에 호출됩니다. 이 훅을 사용하면 화면이 다시 그려진 후에 추가적인 작업을 수행할 수 있습니다.updated 훅은 데이터가 변경되어 화면이 다시 렌더링된 후에 실행되므로, 변경된 데이터에 대한 후속 처리를 할 수 있습니다. 예를 들어, 화면이 다시 그려진 후에 특정 DOM 요소에 접근하여 애니메이션을 추가하거나 외부 라이브러리를 초기화할 수 있습니다.아래는 updated 훅을 사용한 예제입니다. {{ message }} 메시지 변경 위 예제에서 updated 훅은 데이터가 변경되어 화면이 다시 렌더링된 후에 실행됩니다. 이 시점에서는 변..
Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. beforeUpdate 훅은 데이터가 변경되고 가상 DOM이 다시 렌더링되기 전에 호출됩니다. 이 훅을 사용하면 데이터 변경 전에 추가적인 로직을 수행할 수 있습니다.예를 들어, beforeUpdate 훅을 사용하여 데이터 변경 전에 변경 전 후의 데이터를 비교하거나, 변경된 데이터를 서버로 전송하는 등의 작업을 수행할 수 있습니다.아래는 beforeUpdate 훅을 사용한 예제입니다. {{ message }} 메시지 변경 위 예제에서 beforeUpdate 훅은 데이터가 변경되고 화면이 다시 렌더링되기 전에 실행됩니다. 이 시점에서는 데이터가 변경되었지만 화면에는 아직 반영되지 않은 상태입니다. 이를 ..
Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. mounted 훅은 컴포넌트가 DOM에 성공적으로 마운트된 후에 호출됩니다. 이 시점에서는 컴포넌트가 화면에 그려진 후에 관련된 DOM 요소에 접근하거나 초기화 작업을 수행할 수 있습니다.mounted 훅을 사용하면 컴포넌트가 화면에 완전히 그려진 후에 필요한 작업을 수행할 수 있습니다. 예를 들어, DOM 요소에 접근하여 이벤트 리스너를 추가하거나 외부 라이브러리를 초기화할 수 있습니다.아래는 mounted 훅을 사용한 예제입니다. 클릭하세요 {{ message }} 위 예제에서 mounted 훅은 Vue 인스턴스가 DOM에 성공적으로 마운트된 후에 실행됩니다. 이 시점에서는 컴포넌트가 화면에 그려진 ..
Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. beforeMount 훅은 컴포넌트가 DOM에 마운트되기 전에 호출됩니다. 이 훅을 사용하면 컴포넌트가 실제로 화면에 그려지기 전에 필요한 작업을 수행할 수 있습니다.예를 들어, beforeMount 훅을 사용하여 컴포넌트가 마운트되기 전에 외부 API로부터 데이터를 가져오거나, 동적으로 DOM을 조작하는 등의 작업을 수행할 수 있습니다.아래는 beforeMount 훅을 사용한 예제입니다. {{ message }} 위 예제에서 beforeMount 훅은 Vue 인스턴스가 DOM에 마운트되기 전에 실행됩니다. 이 시점에서는 아직 컴포넌트가 화면에 그려지기 전이므로, DOM 조작 및 초기 데이터 설정 등의 작업을..
Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. created 훅은 컴포넌트가 생성된 직후에 호출됩니다. 이 시점에서 컴포넌트는 DOM에 마운트되었고, 데이터 감시 및 이벤트/감시자 설정이 완료되어 있습니다. created 훅은 초기 데이터를 가져오거나 외부 리소스와의 통신을 시작하는 데 유용합니다. 또한 컴포넌트 인스턴스가 완전히 초기화되었으므로, 데이터 및 컴포넌트 메서드에 접근할 수 있습니다.아래는 created 훅을 사용한 예제입니다. {{ message }} 위 예제에서 created 훅은 Vue 인스턴스가 생성된 직후에 실행됩니다. 이 시점에서 초기 데이터를 가져오거나 외부 리소스와의 통신을 시작할 수 있습니다. 이후 message 데이터가 변경..
Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. 이 중 beforeCreate 훅은 컴포넌트가 초기화되고 데이터 감시자 및 이벤트/감시자 설정이 아직 이루어지기 전에 호출됩니다. 이 훅을 이용하면 컴포넌트 초기화 단계에서 추가적인 로직을 실행할 수 있습니다.예를 들어, beforeCreate 훅을 사용하여 컴포넌트가 생성되기 전에 로깅 또는 초기 데이터 설정 등의 작업을 수행할 수 있습니다.아래는 beforeCreate 훅을 사용한 간단한 예제입니다. {{ message }} 위 예제에서 beforeCreate 훅은 Vue 인스턴스가 생성되기 전에 실행됩니다. 이 시점에 console.log를 사용하여 메시지를 출력하고, 초기 데이터로 설정한 message..
1. 개요Vue.js에서 slot은 컴포넌트 내부에 동적으로 콘텐츠를 삽입할 수 있는 강력한 기능입니다. 컴포넌트 개발자는 slot을 사용하여 사용자가 원하는 콘텐츠를 쉽게 추가하도록 허용할 수 있으며, 이는 다양한 상황에서 유용하게 활용될 수 있습니다.이 블로그 게시글에서는 slot의 기본 개념부터 다양한 사용 예시까지, slot을 이해하고 사용하는 데 필요한 모든 것을 자세히 설명합니다.2. slot의 기본 개념slot은 컴포넌트 템플릿 내부에 정의되는 특수 영역입니다. 이 영역은 사용자가 삽입할 콘텐츠를 위한 공간 역할을 하며, 컴포넌트 개발자가 직접 정의한 콘텐츠와 동적으로 교체될 수 있습니다.주요 특징:동적 콘텐츠 삽입: 사용자는 컴포넌트를 사용할 때 slot에 원하는 콘텐츠를 직접 삽입할 수 ..
1. 개요Vue.js에서 탭 컴포넌트는 웹 페이지를 여러 섹션으로 나누고 각 섹션을 간편하게 전환하는 데 유용한 기능입니다. 이 블로그 게시글에서는 기본적인 탭 컴포넌트 구조부터 다양한 활용 예시까지, 탭 컴포넌트를 이해하고 사용하는 데 필요한 모든 것을 자세히 설명합니다.2. 기본 탭 컴포넌트 구조HTML Tab Contents 코드를 사용할 때는 주의가 필요합니다.content_copy설명:template 부분: 탭 컴포넌트의 기본 구조를 정의합니다.div.tab-panel: 탭 컴포넌트의 최상위 컨테이너입니다.slot: 탭 헤더를 위한 공간입니다. 사용자가 삽입할 탭 메뉴 내용을 여기에 넣습니다.div.content: 탭 본문을 위한 공간입니다. 각 탭에 해당하는..