[Vue] Slot 제대로 이해하기
·
vue.js
1. Slot이란 무엇인가?Slot은 부모 컴포넌트가 자식 컴포넌트의 특정 영역에 콘텐츠를 삽입할 수 있게 해주는 Vue.js의 기능입니다. 이를 통해 컴포넌트를 동적으로 구성하거나, 재사용성을 극대화할 수 있습니다.기본적인 Slot 사용법은 다음과 같습니다.  슬롯으로 전달된 제목 슬롯으로 전달된 내용 위 코드에서 은 부모가 전달한 콘텐츠가 표시될 자리입니다.2. v-slot과 Props 사용하기v-slot은 부모와 자식 간 데이터를 공유하는 데 사용됩니다. 슬롯에 props를 전달하면, 부모 컴포넌트는 자식 컴포넌트에서 제공한 데이터를 활용할 수 있습니다.2-1. Props 전달하기 2-2. 부모에서 v-slot으로 Props 받기부모 컴포넌트는 v-slot을 통해 자식에..
[Vue] computed(계산된 속성) vs watch(감시자)
·
vue.js
들어가며최근 회사에서 신입 개발자로부터 computed와 watch의 차이점에 대한 질문을 받았습니다. 저는 순간 당황하며, "음... computed는 값을 반환하는 게 목적이고, watch는 실행하는 게 주 목적이야"라고 얼버무렸습니다. 질문을 받고 나니, "내가 정말 이 두 가지의 차이를 정확히 이해하고 있는 걸까?"라는 생각이 들었고, 이를 명확히 정리하고자 블로그 글을 쓰게 되었습니다.  1. computed와 watch란? computed: 계산된 속성 (Computed Properties)목적: 값을 반환.Vue 3에서 computed는 반응형 데이터를 기반으로 새로운 값을 계산하여 반환합니다.값은 캐싱되며, 종속된 데이터가 변경될 때만 다시 계산됩니다. 예제:  Original: {{ c..