실전 코드로 배우는 Vue.js

137

CHAPTER 03

컴포넌트 구성

이로써 슬롯을 활용해

UI

컴포넌트를 커스터마이징할 준비는 끝났다. 헤더와 푸터, 측면 패

널 레이아웃, 대화 상자나 알림용 모달 컴포넌트 등 기본적인 재사용 레이아웃 요소들을 표

준화된 슬롯 형태로 생성할 수 있다. 코드를 체계적으로 유지하고 재사용성을 높이는 데 슬

롯이 얼마나 큰 역할을 하는지 머지않아 실감하게 될 것이다.

NOTE

슬롯을 사용면 스타일도 영향을 받는다. 컴포넌트에 정의된 스타일은 슬롯 영역에 적용되지 않는

다. 슬롯에 스타일을 적용하는 방법은

3

.

11

.

2

절을 참고하기 바란다.

다음으로

refs

를 이용해 컴포넌트 인스턴스나

DOM

엘리먼트에 접근하는 방법을 알아보자.

3.93.9

refref

의 이해의 이해

Vue

는 통상적으로 대부분의

DOM

상호작용을 알아서 처리한다. 그러나 일부 상황에서

DOM

을 더 세밀하게 조작하기 위해 컴포넌트

DOM

엘리먼트에 직접 접근할 필요가 있다.

이를테면 사용자가 버튼을 클릭할 때 모달 대화 상자를 연다거나, 컴포넌트 마운트 직후 특

정 입력 필드에 포커스를 두려 하는 상황이다. 이러한 경우

ref

속성을 통해 대상

DOM

엘

리먼트 인스턴스에 접근할 수 있다.

ref

는

Vue

내장 속성이며

DOM

엘리먼트 또는 마운팅된 자식 인스턴스의 직접 참조를 전

달해준다.

ref