믹스인과 사용자 지정 디렉티브
믹스인으로 로직을 재사용하고 사용자 지정 디렉티브를 만듭니다.
믹스인과 사용자 지정 디렉티브은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
로직 재사용하기
app이 커질수록 같은 로직이 여러 컴포넌트에 반복됩니다. 뷰는 이를 공유하는 여러 방법을 제공합니다. 이 레슨에서는 그중 두 가지인 이전 방식의 믹스인 접근법과 강력한 사용자 지정 디렉티브를 다룹니다.
믹스인이란 무엇인가요
믹스인은 컴포넌트 옵션(데이터, 메서드, 후크)을 포함한 객체로, 이를 사용하는 모든 컴포넌트에 병합됩니다. 뷰 2에서 로직을 재사용하는 전통적인 방식이었습니다.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}믹스인 사용하기
mixins 배열을 통해 컴포넌트에 믹스인을 추가합니다. 믹스인의 옵션이 컴포넌트 고유 옵션과 병합됩니다.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}믹스인의 단점
믹스인에는 실제 문제가 있습니다. 속성의 출처가 불분명하고(암시적 출처), 믹스인 사이에서 이름이 충돌할 수 있으며, 병합 규칙이 혼란스러워집니다. 이러한 문제로 인해 더 나은 접근법이 등장했습니다.
컴포저블: 더 나은 방식
뷰 3에서는 컴포저블(구성 API를 사용하는 함수)이 믹스인을 대체합니다. 컴포저블은 출처를 명확하게 만들고, 이름 충돌을 피하며, 깔끔하게 조합할 수 있습니다. 새로운 코드에서는 컴포저블을 우선 사용하세요.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}컴포저블 사용하기
setup에서 컴포저블을 호출하고 필요한 항목만 구조 분해합니다. 그러면 출처가 분명하고 명시적으로 드러납니다.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}사용자 지정 디렉티브란 무엇인가요
사용자 지정 디렉티브는 v-name을 사용하여 요소에 연결할 수 있는 저수준 DOM 동작을 패키징합니다. focus, 스크롤 또는 도구 설명처럼 DOM을 직접 조작하는 작업에 적합합니다.
전역 directive 등록하기
app.directive를 사용하여 app에 directive를 등록합니다. 템플릿에서는 이름 앞에 v- 접두사를 붙여 사용합니다.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />디렉티브 후크
디렉티브에는 수명 주기 후크가 있습니다. mounted(요소가 삽입됨), updated(컴포넌트가 업데이트됨), beforeUnmount(정리) 등이 있으며 컴포넌트 수명 주기를 반영합니다.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})바인딩 객체
두 번째 후크 인수는 바인딩입니다. 여기에는 value(전달된 값), arg(콜론 뒤의 값), modifiers(점 뒤의 값)가 포함됩니다.
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }지역 디렉티브
한 컴포넌트에서만 사용하는 디렉티브는 전역으로 등록하는 대신 directives 옵션을 사용하여 지역적으로 등록합니다.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}빠른 확인
믹스인과 디렉티브에 대한 지식을 확인해 보세요.
복습
믹스인은 옵션을 컴포넌트에 병합하지만 출처가 암시적이고 이름이 충돌하는 문제가 있으므로, 뷰 3에서는 컴포저블을 우선 사용하세요. 사용자 지정 디렉티브는 app.directive를 사용해 전역으로 또는 지역적으로 등록할 수 있으며, mounted와 같은 후크 및 binding 객체를 사용하여 DOM 동작을 패키징합니다. 다음에는 기능을 재사용 가능한 플러그인으로 패키징합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 42
- 레슨
- 156
자주 묻는 질문
“믹스인과 사용자 지정 디렉티브” 강의는 무료인가요?
네 — “믹스인과 사용자 지정 디렉티브” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“믹스인과 사용자 지정 디렉티브”에서 뭘 배우나요?
믹스인으로 로직을 재사용하고 사용자 지정 디렉티브를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.
“믹스인과 사용자 지정 디렉티브” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 믹스인과 사용자 지정 디렉티브
- 플러그인 개발
- 확장 가능한 폴더 구조