Vue의 Custom Directives

Vue의 Custom Directives

✂️  커스텀 디렉티브

- 직접 커스텀한 디렉티브

- 커스텀 디렉티브는 주로 HTML 요소에 대한 low-level(저수준) DOM 접근과 관련된 로직을 재사용하기 위한 것이다.

※ Vue에서는 UI 재사용할 땐 Component, 상태를 저장하는 비즈니스 로직을 재사용할 때는 Composables을 사용한다.

 

Custom Directives 등록 방법

(1) script setup에서 커스텀 디렉티브 등록

<script setup>
    const vFocus = {
        mounted: el => {
            // 포커스
            el.focus();
        },
    };
</script>

- v 접두사로 시작하는 모든 카멜케이스 변수를 커스텀 디렉티브로 사용할 수 있다.

 

(2) 일반 script에서 커스텀 디렉티브를 등록

<script>
    setup() {어쩌구},
    directive: {
    	focus: {어쩌구}
    }
</script>

- directives 옵션을 사용하여 커스텀 디렉티브를 등록

 

(3) 전역적으로 커스텀 디렉티브 등록

// main.js
app.directive('focus', { 어쩌구 })

 

- main.js 에 등록

 

Custom Directives 함수로 단축 표현

app.directive('color', (el, binding) = {
	el.style.color = binding.value
})

 

Custom Directives 주의사항 

- 컴포넌트에서 커스텀 디렉티브는 권장하지 않는다.

- 이유는 커스텀 디렉티브는 Non-Props 속성과 유사하게 컴포넌트의 '루트' 노드에 적용이 되는데 vue3부터는 컴포넌트가 둘 이상의 루트 노드가 있을 수 있기 때문에 다중 컴포넌트에 적용되면 디렉티브가 무시되고 경고가 발생한다.

- 또한 속성과 달리 디렉티브는 v-bind='$attrs'를 사용하여 다른 요소에 전달도 불가능하다.

 

결론 : 그냥 알고만 있자