본문 바로가기

분류 전체보기202

Vue3에서 Slots는 어떻게 달라졌을까? – 기본 슬롯부터 named slot, scoped slot까지 정리 1. Slot이란?은 부모 컴포넌트가 자식 컴포넌트에 콘텐츠를 주입할 수 있게 해주는 기능입니다. Vue에서 컴포넌트를 유연하게 재사용할 수 있게 해주는 핵심 도구예요.2. Vue2 vs Vue3의 Slot 개선점항목Vue2Vue3기본 사용동일이름 있는 슬롯 (named slot)slot="name"#name 또는 v-slot:name스코프 슬롯 (scoped slot)slot-scope 사용v-slot으로 통합타입 지원제한적TypeScript 지원 강화setup()에서 접근어려움useSlots()로 쉽게 접근 가능3. Slot의 종류와 사용 예시1) 기본 슬롯 (default slot) 이건 기본 슬롯 내용입니다. 2) 이름 있는 슬롯 (named slot) 헤더 콘텐츠 .. 2025. 7. 29.
Vue3에서의 Dynamic Components: 더 깔끔하고 직관적으로! 동적 컴포넌트란?동적 컴포넌트(Dynamic Component) 는 상황에 따라 렌더링할 컴포넌트를 바꿔야 할 때 사용하는 기능이에요. 예를 들어 탭 UI에서 클릭한 탭에 따라 다른 컴포넌트를 보여주고 싶을 때 사용하죠. Vue2 방식 복습Vue2에서는 태그와 :is 속성을 사용해 동적 컴포넌트를 이렇게 렌더링했어요. Vue3에서의 주요 개선점1. Vue3에서는 컴포넌트 이름 문자열을 넘길 때 components 옵션에 등록되어 있어야 인식됩니다. 하지만 :is="components[current]" 처럼 객체 자체를 넘기는 방식도 가능해졌어요. 2. 컴포넌트 자체를 바인딩할 수 있음 Vue2에선 문자열만 바인딩하는 게 일반적이었지만, Vue3에선 컴포넌트 자체도 넘길 수 있어요. ref(Use.. 2025. 7. 28.
Vue3의 변화: Fragments 지원으로 루트 노드가 두 개 이상 가능해졌다고? Vue2에서는 모든 컴포넌트가 하나의 루트 노드만 가질 수 있었습니다. 하지만 Vue3부터는 Fragments 기능을 통해 여러 루트 노드를 허용함으로써 더 깔끔하고 유연한 컴포넌트 구조를 만들 수 있게 되었습니다. 이번 글에서는 Vue3의 Fragments 기능이 무엇인지, 왜 중요한지, 그리고 실제 사용 예시까지 살펴보겠습니다.1. Vue2의 한계: 루트 노드 제약Vue2에서는 다음과 같은 코드가 오류를 발생시킵니다. 헤더 본문❌ Error: Component template should contain exactly one root element.그래서 Vue2에서는 불필요한 wrapper div를 사용해서 하나의 루트 노드로 감싸야 했습니다. 헤더 본문 2. Vue3의 변화: F.. 2025. 7. 26.
Vue3의 혁신 기능: Teleport와 Suspense 완벽 가이드 Vue3에서는 사용자 경험을 향상시키고 컴포넌트 구조를 유연하게 하기 위해 Teleport와 Suspense라는 두 가지 새로운 기능이 도입되었습니다. 이 글에서는 이 두 기능이 무엇이며, 언제, 어떻게 사용하는지 자세히 알아보겠습니다.1. Teleport란?정의 Teleport는 컴포넌트의 렌더링 위치를 현재 DOM 트리 바깥으로 옮길 수 있는 기능입니다. 모달, 알림창, 툴팁 등 시각적으로 상위 DOM 요소에 위치해야 할 때 유용합니다. 문법 예시 본문 내용 모달 내용입니다 주요 속성속성설명to렌더링할 대상 DOM 셀렉터 (예: body, #modal-root)disabledtrue일 경우 teleport 기능을 사용하지 않음 사용 시점모달.. 2025. 7. 26.

티스토리툴바