본문 바로가기

전체 글202

Vue3 script setup 문법 정리 – SFC의 최신 스타일 Vue3에서는 Composition API를 더 간결하고 효율적으로 사용할 수 있도록 script setup 방식 {{ count }} setup() 함수를 생략하고, {{ props.title }}defineProps, defineEmits는 전역 함수처럼 쓰이지만 실제로는 컴파일 타임 매크로props나 emit도 setup() 없이 직접 선언 가능 추가 기능: TypeScript와 함께 사용하기 타입 명시도 훨씬 간결하고 안전하게 작성 가능lang="ts"만 선언하면 TypeScript 자동 적용 기타 팁 기능설명`useXXX()` 훅 함수 작성 용이Custom Hook 구성하기 매우 쉬움`defineExpose()`부모 컴포넌트에서 자식의 메서드 등 접근 가능`` + `` 동시 사용 가능필요.. 2025. 7. 25.
Vue3 템플릿 문법 변화 정리 – v-model, v-bind, 이벤트 바인딩의 변화 중심 –Vue3는 템플릿 문법에 몇 가지 중요한 변화가 있습니다. 특히 v-model의 작동 방식이 크게 바뀌어, 컴포넌트 간 데이터 바인딩이 더 명확하고 유연해졌습니다.1. v-model의 변화: prop과 이벤트 이름 변경Vue2 방식:props: ['value'],methods: { updateTitle() { this.$emit('input', '새로운 값') }}Vue2에서는 v-model이 자동으로 value prop을 받고, input 이벤트를 발생시켜 부모 값을 갱신했어요. 하지만 이 구조는 컴포넌트마다 여러 v-model을 사용하기 어렵다는 단점이 있었습니다. Vue3 방식:defineProps(['title'])define.. 2025. 7. 24.
Vue3에서의 라이프사이클 훅 변화 정리 – Options API에서 Composition API로의 변화 중심으로 –Vue는 컴포넌트의 생성부터 소멸까지 다양한 라이프사이클 훅(Lifecycle Hooks)을 제공합니다. Vue2에서는 Options API를 통해 각 훅을 created, mounted, updated 등으로 정의했지만, Vue3에서는 Composition API에 맞춰 onMounted, onUpdated 등의 함수형 API를 도입했습니다.Vue2의 라이프사이클 훅 예시export default { created() { console.log('컴포넌트가 생성되었습니다.') }, mounted() { console.log('컴포넌트가 마운트되었습니다.') }, updated() { console.log.. 2025. 7. 24.
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.

티스토리툴바