지난 포스트에서 템플릿 문법을 설명하면서 화면을 조작하는 방법에 데이터 바인딩과 디렉티브가 있다고 했었습니다. 그리고 디렉티브에 대해선 간략하게 설명만 하고 넘어갔죠.
오늘은 Vue에서 기본적으로 제공하고 있는 빌트인 디렉티브에 대해서 알아보도록 하겠습니다.
디렉티브
v- 접두사를 사용해서 표현한 속성들을 디렉티브라고 부릅니다. 디렉티브를 사용하면 화면 조작을 편리하게 할 수 있다는 장점이 있습니다. 그리고 뷰에서는 몇 가지 디렉티브들을 기본적으로 제공하고 있는데 이들을 빌트인 디렉티브라고 부르며 그 종류는 아래와 같은 것들이 있습니다.
디렉티브에는 속성값이 오는데, 이 속성값은 단일 자바스크립트 표현식이 와야합니다. (v-for, v-on, v-slot은 예외입니다.) 디렉티브는 이 속성값이 변경될 때 DOM 요소를 업데이트하게 됩니다.
디렉티브는 다음과 같은 구조를 갖습니다.
-
이름
이름은 사용하고자 하는 디렉티브의 이름입니다. -
인수
어떤 디렉티브는 이름 뒤에콜론 :으로 인수를 표기할 수 있습니다.대괄호 []를 이용하면 동적으로 인수를 만들 수도 있습니다. 동적 인수는 컴포넌트 인스턴스에서 결정됩니다. -
수식어
수식어는점 .으로 시작하는 접미사입니다. 디렉티브가 특정 방식으로 바인딩되기를 원할 때 사용하여 나타냅니다.
빌트인 디렉티브
이제 위에서 소개했던 빌트인 디렉티브의 몇 가지를 살펴보도록 하겠습니다.
여기서는 빌트인 디렉티브의 종류와 기본적인 내용 그리고 사용법을 다룹니다. 설명이 부족한 몇몇 빌트인 디렉티브에 대해서는 연관 내용과 함께 더 자세하게 다시 다룰 예정입니다.
v-text
요소의 텍스트 콘텐츠를 업데이트합니다. 값으로는 string타입을 받습니다.
v-text는 기존 컨텐츠를 완전히 덮어씌웁니다. 따라서 일부분만 업데이트하고 싶다면 이중 중괄호 문법을 사용해야합니다.
<span v-text='str'></span>
<!--아래 문법과 동일-->
<span>{{str}}</span>v-html
요소의 innerHTML을 업데이트합니다. 값으로는 string타입을 받습니다.
v-html의 값은 HTML로 삽입됩니다.
HTML의 동적 삽입은
XSS 공격에 취약하기 때문에v-html의 사용보다는 컴포넌트의 렌더링을 이용하는 것이 권장됩니다.XSS, Cross Site Scripting
웹의 취약점 공격 방식으로, 권한이 없는 사용자가 웹 페이지에 스크립트를 삽입하여 공격하는 방식을 의미합니다.
<div v-html='html'></div>
scoped속성이 적용된<style>은 v-html의 요소들에게는 적용되지 않습니다.
v-show
표현식에 truthy한 값이 전달되면 요소를 렌더링합니다.
v-show가 설정된 요소는 true이던 false이던 항상 브라우저에 렌더링이 되어 있습니다. 내부적으로 CSS의 display 옵션을 건들며 요소가 보여질지 말지를 결정합니다.
<div v-show='flag'>v-show 조건부 렌더링</div>v-if, v-else, v-else-if
v-if는 우리가 일반적으로 사용하던 if구문처럼 표현식이 true이면 렌더링을 하고, false이면 렌더링을 하지 않습니다.
이때 v-show와의 차이점은 이미 언급했지만,
v-show는 표현식 값이 어쨋든간에 브라우저에 렌더링을 하고 CSS의display속성을 조절하며 보여지고 안보여지는지를 결정합니다.반면에
v-if는 표현식이 truthy하면 요소를 렌더링하고, falsy하면 렌더링 자체를 하지 않습니다.
v-else는 v-if와 함께 오는 else 체인입니다.
v-else-if 또한 v-if와 함께 사용하는 체인입니다.
<div v-if="x === 'A'">x는 A</div>
<div v-else-if="x === 'B'">x는 B</div>
<div v-else>x는 A도 B도 아님</div>v-for
소스 데이터를 기반으로 요소나 템플릿 블록을 반복 렌더링합니다. 배열, 객체, number, string, 반복자를 값으로 받습니다.
반복 요소의 현재 값에 별칭을 부여하기 위한 alias in expression을 사용합니다.
<div v-for='elem in arr'>현재 요소: {{elem}}</div>v-on
v-on은 요소에 이벤트 리스너를 연결하는 디렉티브입니다. 위에서 언급했던 인수와 수식어를 사용합니다.
이벤트 타입을 인수로 표현합니다.
<요소 v-on:이벤트_종류.수식어='이벤트_리스너'></요소>
<!--수식어는 선택사항-->수식어로는 다음과 같은 것들이 올 수 있습니다.
- .stop: event.stopPropagation() 호출
- .prevent: event.preventDefault() 호출
- .capture: 캡쳐 모드로 이벤트 등록
- .self: 이벤트가 해당 요소에서 전달되는 경우에만 트리거
- .{keyAliass}: 이벤트가 특정 키에 대해서만 트리거
- .once: 이벤트가 딱 한 번만 트리거
- .left: 이벤트가 마우스 왼쪽 버튼으로만 트리거
- .right: 이벤트가 마우스 오른쪽 버튼으로만 트리거
- .middle: 이벤트가 마우스 휠 클릭으로만 트리거
- .passive: {passive: true} 옵션으로 DOM 이벤트 등록
event.stopPropagation()은 이벤트의 버블링을 방지합니다. (부모 요소로의 이벤트 전파를 막음)event.preventDefault()는 요소의 기본 동작을 막습니다. (a태그의 링크 이동이라던가 submit 버튼의 새로고침 효과라던가){passive: true} 옵션은 브라우저에게 요소의 기본 동작을 막지 않음을 선언하는 옵션입니다. (주로 터치 이벤트와 스크롤에서 사용)
v-on은 디렉티브 표기대신에 @로 단축해서 사용할 수도 있습니다.
<button v-on:click='onClick'></div>
<!-- @ 단축 구문-->
<button @click='onClick'></div>
<button @click.prevent='onClick'></div>v-bind
v-bind는 하나 이상의 속성이나 컴포넌트 props를 표현식에 동적 바인딩합니다.
v-bind의 수식어는 다음과 같습니다.
- .camel: kebab-case의 속성 이름을 camelCase로 변경
- .prop: 바인딩을 DOM 속성(property)으로 강제 설정
- .attr: 바인딩을 DOM 속성(attribute)으로 강제 설정
kebab-case는 케밥 꼬치에 고기를 꽂은 모양이라 해서 이름 붙여진 명명법입니다.
vue-practice,user-information-system과 같은 명명 방식입니다.
v-bind도 단축 문법을 제공하고 있습니다. 콜론 :으로 단축이 가능합니다.
<!--속성 바인딩, 속성에 src가 있다고 가정-->
<img v-bind:src='src'></img>
<!--단축 문법 속성 바인딩-->
<img :src='src'></img>
<!--prop 바인딩-->
<ChildComponent :prop='data' />바인딩은 여러 용도로 다양하게 사용됩니다. 참조
본격적으로 바인딩에 대한 내용에 들어가면 다시 한 번 더 v-bind를 정리할 예정입니다.
v-model
사용자 입력을 받는 form 요소나 컴포넌트에 대해 양방향 바인딩을 만들어주는 디렉티브입니다. 컴포넌트, <input>, <textarea>, <select>에 사용할 수 있습니다.
수식어는 다음과 같습니다.
- .lazy: input대신 change 이벤트를 수신
- .number: 입력 문자열을 숫자로 변환
- .trim: 문자열을 트리밍. (공백 제거)
추후에 form 요소, form 입력 바인딩에 대한 내용과 함께 더 자세한 설명 포스트를 만들 예정입니다.
v-slot
이름이 있는 슬롯이나 props를 받을 것으로 예상되는 scoped를 나타냅니다. <template>나 컴포넌트에서만 사용할 수 있습니다.
추후에 slot 개념과 함께 더 자세한 설명 포스트를 만들 예정입니다.
v-pre
현재 요소와 모든 자식 요소의 컴파일을 생략합니다. 이 디렉티브는 표현식을 사용하지 않습니다.
이중 중괄호 태그를 표시하고자 하는 상황에서 주로 사용합니다. (컴파일하면 문법 표현이 되므로)
<div v-pre>{{ 이 내용은 컴파일되지 않습니다. }}</div>v-once
요소와 컴포넌트를 한 번만 렌더링하고 이후의 업데이트를 하지 않습니다. 역시 표현식을 사용하지 않습니다.
<div v-once>str이 변경되어도 업데이트되지 않습니다.: {{str}}</div>v-memo
템플릿의 하위 트리를 메모합니다. 값으로는 배열을 받는데, 이 배열의 모든 값이 마지막 비교 값과 변함이 없다면 업데이트를 생략합니다. (즉, 메모(메모제이션)은 렌더링 최적화)
<div v-memo='[value1, value2]'></div>v-cloak
준비될 때까지 컴파일되지 않은 템플릿을 숨깁니다. 표현식을 사용하지 않습니다. 빌드 과정을 사용하지 않는 경우에만 사용하는 디렉티브입니다.
<div v-cloak>컴파일이 완료되지 않으면 표시되지 않음</div>