vue37 Vue3에서 provide/inject 사용하는 방법과 변화 포인트 정리 Vue에서는 컴포넌트 간 깊은 계층 구조 속에서 데이터를 전달할 때 props drilling 없이 데이터를 공유할 수 있도록 provide와 inject 기능을 제공합니다. Vue2에서도 존재했던 기능이지만, Vue3에서는 Composition API와 함께 사용법이 더 간결하고 명확하게 변화했습니다. 이번 포스팅에서는 provide와 inject의 차이점과 Vue3에서의 사용법을 정리해보겠습니다.provide와 inject는 어떤 역할일까?provide: 부모 컴포넌트에서 데이터를 제공inject: 자식 컴포넌트에서 해당 데이터를 주입받음특징props처럼 직접 전달하지 않아도 됨주로 전역 설정값 또는 공통 의존성 객체를 공유할 때 사용Vue2 방식의 사용법Vue2에서는 provide와 inject를 .. 2025. 7. 23. Vue3에서 Props와 Emits를 타입으로 명확하게 정의하는 방법 Vue3에서는 Composition API의 도입으로 컴포넌트 구조가 훨씬 유연해졌습니다. 그중에서도 props와 emits의 타입 명시 방식은 Vue2와 비교해 큰 변화 중 하나인데요. 이번 글에서는 Vue3에서 props와 emits를 어떻게 더 명확하고 타입 안전하게 정의할 수 있는지, 그리고 실제 코드 예제를 통해 쉽게 이해할 수 있도록 설명드릴게요.Vue2에서는 props와 emits를 어떻게 사용했을까?Vue2에서는 props는 배열 또는 객체 형태로 선언했고, $emit은 별도 선언 없이 자유롭게 호출할 수 있었습니다.// Vue2 방식export default { props: ['title'], methods: { send() { this.$emit('submit', 'h.. 2025. 7. 23. Vue3 템플릿에서의 반응형 변수 사용법 Vue3의 Composition API를 사용할 때 ref(), reactive()로 정의한 변수들을 템플릿에서 어떻게 다루는지 정확히 이해하는 것이 중요합니다. 이번 글에서는 setup() 함수 안에서 정의한 반응형 변수를 템플릿에서 어떻게 접근하고 사용하는지 알려드릴게요.1. ref() 변수 템플릿에서 사용하기ref()로 선언한 변수는 .value로 접근해야 하지만, 템플릿에서는 .value를 생략하고 사용할 수 있어요.예제: {{ count }} +요약:JS 안: count.value템플릿 안: {{ count }}, @click="count++"2. reactive() 변수 템플릿에서 사용하기reactive()로 만든 객체는 속성에 직접 접근하면 되고, 템플릿에서도 그대로 사용하면 됩니다. .. 2025. 7. 22. Vue3에서의 computed()와 watch(): Composition API로 바뀐 사용법 Vue2에서도 익숙하게 사용하던 computed와 watch. Vue3에서는 Composition API 방식으로 이들을 더 유연하게 사용할 수 있습니다. 이번 글에서는 Vue3에서 computed()와 watch()를 어떻게 사용하는지, 그리고 각각의 차이점은 무엇인지 정리해봅니다.1. computed()란?computed()는 계산된 값을 반환하는 반응형 함수입니다. 의존하는 값이 변경될 때만 자동으로 재계산되며, 캐싱되는 특징이 있어 성능상 유리합니다.예제: computed() 기본 사용법import { ref, computed } from 'vue'export default { setup() { const price = ref(100) const quantity = ref(2) .. 2025. 7. 22. 이전 1 2 다음