Prop Drilling 문제Vue에서 일반적으로 부모 → 자식으로 데이터를 전달할 때 props를 사용한다.하지만 컴포넌트 구조가 깊어지면 아래처럼 중간 단계의 컴포넌트들이 단순히 전달만을 위한 용도로 props를 받아야 하는 상황이 생긴다. App → DeepChild까지 데이터를 전달하려면 Layout, Footer까지 모두 props를 받아야 한다.이런 문제를 Prop Drilling이라고 부른다.Provide / Inject란?Vue 3에서는 provide()와 inject()를 사용하면 컴포넌트 트리 구조와 상관없이 상위 → 하위로 직접 데이터 전달이 가능하다.상위: provide()를 통해 데이터를 “제공”하위: inject()로 데이터를 “주입받음”중간 컴포넌..

Vue에서 컴포넌트를 설계하다 보면, 특정 위치에 외부에서 콘텐츠를 끼워 넣고 싶을 때가 있다. 이런 경우 slot을 사용하면 컴포넌트의 내부 구조는 유지하면서 다양한 콘텐츠를 유연하게 전달할 수 있다.기본 슬롯가장 단순한 형태의 슬롯은 이다. 부모 컴포넌트에서 전달한 콘텐츠가 이 자리에 삽입된다. 확인  결과 확인전달할 수 있는 콘텐츠는 텍스트뿐 아니라 HTML 요소, 다른 컴포넌트 등 어떤 것이든 가능하다. 확인 ✔️ 폴백 콘텐츠슬롯에 콘텐츠가 전달되지 않은 경우를 대비해 기본값(폴백)을 지정할 수 있다. 기본 버튼 이렇게 하면 슬롯 콘텐츠가 없을 때 "기본 버튼"이 출력된다.이름이 있는 슬롯 (Named Slots)복잡한 컴포넌트에서 여러 위치에 서로 다른 콘..

Vue에서 컴포넌트를 사용할 때 props로 선언하지 않은 속성은 어떻게 처리될까?예를 들어 다음과 같이 컴포넌트를 사용할 경우를 보자.여기서 class="rounded"는 BaseCard 컴포넌트의 props로 선언되지 않았는데도, 결과적으로 렌더링된 요소에 반영된다.이런 속성을 Vue에서는 Non-Prop 속성, 혹은 fallthrough 속성이라고 한다. 기본 동작Vue 3에서 컴포넌트가 단일 루트 요소를 가지고 있다면, Non-Prop 속성은 해당 루트 요소로 자동 전달된다. 내용렌더링 결과는 다음과 같다.내용컴포넌트 내부에서 props로 선언하지 않았지만, class가 루트 요소인 에 자동으로 적용된다. class와 style은 병합된다자식 컴포넌트 쪽에서 이미 class나 style이 선언되..

Vue에서 자식 컴포넌트가 부모에게 어떤 동작을 요청하거나 데이터를 전달해야 할 때 사용하는 방법이 있다.바로 이벤트 발생(emit)이다.이 글에서는 Vue 3 기준으로 emit을 이용한 컴포넌트 간 커뮤니케이션 방식과, v-model 커스텀 바인딩까지 정리한다. 기본 개념 – $emit자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하려면 $emit()을 사용한다. 클릭 자식 컴포넌트에서 $emit('click-button')을 호출하면, 부모는 @click-button을 통해 이를 받을 수 있다.이벤트에 데이터 담기이벤트에는 원하는 값을 함께 보낼 수 있다. 메시지 전송 더보기참고!자식은 "이벤트 이름 + 전달할 값"만 정해서 보내고, 그걸 부모가 "받아서 처리하는 함수만 정의"하는 구조임“나는..

컴포넌트를 사용하다 보면 화면 구조는 동일하지만 표시되는 데이터만 다르게 처리하고 싶을 때가 많다. 예를 들어 블로그 게시글을 나타내는 PostItem 컴포넌트를 만들고, 게시글의 제목과 내용을 외부에서 받아서 다르게 보여주고 싶을 수 있다.이런 경우 사용하는 것이 바로 props다. Props란?props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있도록 하는 사용자 정의 속성이다.간단히 말하면, 컴포넌트를 재사용하되 그 안에 표시되는 데이터를 동적으로 다르게 주고 싶을 때 사용하는 메커니즘이다. Props 선언 방법- 문자열 배열로 선언// PostItem.vueexport default { props: ['title'], setup(props) { console.log(prop..

Vue.js에서 v-로 시작하는 특수 속성들을 디렉티브(directives)라고 합니다.디렉티브는 DOM 요소에 특정한 동작을 주입하기 위해 사용되며, Vue의 반응성 시스템을 활용하여 데이터의 변경에 따라 DOM을 동적으로 업데이트합니다.주요 v- 디렉티브들v-bind사용 목적: HTML 속성에 Vue.js의 데이터를 바인딩할 때 사용합니다.사용 예시:v-bind는 약어로 :를 사용할 수 있습니다.v-model사용 목적: 양방향 바인딩을 위해 사용합니다. 주로 폼 요소(input, select, textarea 등)에서 사용되며, 사용자 입력과 데이터 상태를 동기화합니다.사용 예시: Hello, {{ username }}!이 디렉티브는 입력값을 데이터 속성과 연결해, 사용자 입력이 있을 때마다 데이터를..