vue: Drective

drective lifeCycleHook with chatGPT

 

vue3d의 Composition API 내에서 디렉티브는 기본적으로 setup() 함수내에서 선언하고 관리할 수 있습니다. Composition API에서는 Reactive 상태, Computed 속성, Watchers와 같은 기능을 활용하여 디렉티브를 더 효율적으로 관리하고 구성할 수 있습니다.

디렉티브를 Composition API와 함께 사용하면 보다 간결하고 재사용 가능한 코드를 작성할 수 있습니다. 기본적으로 디렉티브는 setup() 함수 외부에서 정의되며, app.drective() 또는 drectives옵션을 사용해 Vue애플리케이션에 등록할 수 있습니다.

 

1. Composition API에서의 디렉티브 사용

vue3의 Composition API내에서는 디렉티브를 사용하는 방식이 Vue2와 비슷? 하지만, Composition API의 강력한 반응성 시스템을 활용할 수 있습니다. 일반적으로 app.drective()를 사용하여 전역 또는 로컬 디렉티브를 정의할 수 있습니다.

 

1.1 전역 디렉티브 등록

전역 디렉티브를 app.drective()를 사용해 Vue 애플리케이션에 등록할 수 있습니다.

import { createApp } from 'vue';

const app = createApp({
	setup(){
    //컴포지션 API로 상태와 로직 관리
    },
});

app.drective('focus', {
	mounted(el){
    	el.focus();
    }
});

app.munt('#app')

위 예제에서는 focus라는 전역 디렉티브를 등록하여, v-focus를 사용하는 요소에 자동으로 포커스를 적용할 수 있습니다.

 

1.2 로컬 디렉티브 등록

로컬 디렉티브는 컴포넌트 내부의 drectives옵션을 사용하여 등록할 수 있습니다.

import { definedComponent } from 'vue';

export default definedComponent({
	directives:{
    	focus:{
        	mounted(el){
            	el.focus();
            }
        }
    },
    setup(){
    	// 컴포지션 API를 활용한 로직 처리
    }
});

위 코드에서는 focus 디렉티브가 이 컴포넌트 내에서만 유효합니다.

 

2.디렉티브의 Lifecycle Hooks (생명주기 훅)

디렉티브는 Vue 3에서 몇가지 생명주기 훅(lifecycle hooks)을 지원합니다. Composition API와 함께 사용할 때 이 훅들을 효과적으로 활용할 수 있습니다.

 

2.1. beforeMount

디렉티브가 처음 DOM에 삽입되기 전에 호출됩니다.

 

2.2. mounted

디렉티브가 DOM에 삽입된 후에 호출됩니다. 대부분의 DOM관련 작업은 이 시점에서 처리합니다.

 

2.3. beforeUpdate

디렉티브가 바인딩된 값이 변경되기 전에 호출됩니다. 값이 변경될 때마다 상태를 체크할 수 있습니다.

 

2.4. update

디렉티브 바인딩값이 변경된 후 호출됩니다. DOM의 업데이트 후 작업을 할 수 있습니다.

 

2.5. beforeUnmount

디렉티브가 DOM에서 제거되기 전에 호출됩니다.

 

2.6. unmounted

디렉티브가 DOM에서 제거된 후 호출됩니다.

 

3. 디렉티브의 인수와 바인딩 값 사용

디렉티브는 여러 인수를 가질 수 있습니다. 기본적으로 el, binding, vnode와 같은 객체가 주어집니다.

• el: 디렉티브가 적용된 DOM 엘리먼트
• binding: 디렉티브의 바인딩 값(예: v-my-drective="expression")
• vnode: 해당 디렉티브가 적용된 Virtual Node 객체

예시: 동적 클래스 추가

app.directive('dynamic-class',{
	mounted(el, binding){
    	const className = binding.value; //v-dynamic-class="dynamicClass"
        el.ClassList.add(className);
    }
});

 

이예제에서는 v-dynamic-Class="ClassName"으로 디렉티브를 사용하여, className이 DOM요소에 추가됩니다.

 

4. 반응형  값 사용

Compositon API에서의 디렉티브는 Vue의 반응형 상태와 함께 사용할 때 큰 효과를 발휘합니다. ref나 rective를 활용하여 디렉티브내에서 동적으로 반응형 데이터를 처리할 수 있습니다.

예시: 반응형 값에 따른 스타일 변경

import { ref, defineComponent } from 'vue';

export default definComponent({
	setup(){
    	const isActive = ref(true);
        
        return { isActive };
    },
    drectives: {
    	toggleClasss: {
        	update(el, binding){            
            	if(binding.value){                
            		el.classList.add('active');
                }else{
                	el.classList.remove('active');                
                }
            }
        }
    }
});

이 예제에서는 v-toggle-class="isActive"로 사용하고, isActive가 true일때 active클래스를 DOM요소에 추가하거나 제거합니다.

 

5. 디렉티브 동적 업데이트

디렉티브에서 바인딩 된 값이 변경되면, 해당 디렉티브의 동작을 동적으로 업데이트할 수 있습니다. 이때 update 훅을 활용합니다.

app.directive('background',{
	update(el,binding){
    	el.style.backgroundColor = binding.value;
    }
});

이 예제에서는 v-background="color"를 사용하여, color 값이 변경될 때마다 배경색이 업데이트됩니다.

 

결론

vue3의  Composition API내에서 디렉티브를 사용하면 더 유연하고 반응형인 방식으로 DOM조작을 할 수 있습니다. 디렉티브의 생명주기 훅을 활용하고, ref, reactive와 같은 Component API의 기능을 결합하면, 더 직관적이고 유지보수하기 좋은 코드를 작성할 수 있습니다. 디렉티브는 Vue 애플리케이션에서 반복적으로 사용되는 DOM조작을 추상화하여 효율적인 코드 작성을 가능하게 합니다.