선언적 렌더링
Vue.js 의 핵심은 간단한 템플릿 구문을 사용해 데이터를 선언적으로 DOM 에 렌더링할 수 있습니다. 말 그대로 데이터를 선언해서 웹이 출력한다는 말인데요. Vue.js 에서는 데이터를 선언할 때 텍스트 보간법(보관법 X)이라는 걸 활용하는데, 데이터 바인딩의 가장 기본적인 형태는 이 중 중괄호 문법을 사용한 텍스트 보간법입니다.
- Vue.js 는 데이터바인딩의 가장 기본이 되는 건 바로 선언전 렌더링입니다.
- 데이터 바인딩의 가장 기본적인 형태는 이중 중괄호 {{ }} 문법을 사용한 텍스트 보간법입니다.
- 이중 중괄호는 데이터를 HTML 이 아닌 일반 텍스트로 해석합니다. 실제 HTML 을 출력하려면 v-html 디렉티브를 사용합니다.
"중요한 건 Vue.js 는 데이터이라는 것을 선언적 렌더링을 통해 이루어진다는 것입니다."
Class 와 Style 바인딩
보통 HTML 과 CSS 를 동적으로 컨트롤하고 싶을 때, class 를 추가해 HTML 의 스타일링을 관리하곤 합니다. 당연히Vue.js 에서도 가능한데요. 그렇다면, Vue.js 는 어떻게 class 를 동적으로 활용할까요? 그리고 스타일 바인딩과 조건부 레더링을 순차적으로 공부해보도록 하겠습니다.
1. HTML 클래스 바인딩
Vue.js 에서 HTML 클래스 바인딩을 하기 위해선
v-bind: class(줄여서 class)를 활용합니다. class 는 Vue.js 디렉티브와 별반 다르지 않습니다. 객체로 바인딩되며 클래스를 동적으로 토글하기 위해 객체를 :class 에 전달할 수 있습니다.
<div :class="{ active: isActive }"></div>여기서 isActive 는 state 영역(data 영역)에 선언한 임의의 변수이며,
이 변수는 truthiness 즉, true 와 false 값을 가집니다.
2. HTML 스타일 바인딩
HTML 태그에서 인라인 스타일 바인딩을 할 경우, 아래와 같이 코드를 작성했습니다.
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>
</body>그러나 Vue.js 에서는 v-bind 디렉티브를 활용해 클래스 바인딩과 동일하고 객체로 바인딩합니다. :style 은 HTML 엘리먼트의 style 속성에 해당하는 자바스크립트 객체에 대해 바인딩을 지원합니다.
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>위 코드를 보면, 스타일 바인딩에서 해당 프로퍼티 속성은 카멜 케이스로 작성한 것을 볼 수 있습니다. 이 점을 유의해야 합니다.
조건부 렌더링 방법
조건부 렌더링이란 말 그대로 특정 조건에 따라 정보를 렌더링하는 것을 의미합니다. Vue.js 에선는 조건부 렌더링을 할 수 있는 방법이 크게 2가지로 나뉩니다.
1. v-if 조건부 렌더링
첫 번째는 v-if / v-else-if / v-else 디렉티브. 자바스크립트에서 조건부 형식으로 작성했던 if 구문이라 생각하면 됩니다. 의미는 동일합니다.
- v-if 디렉티브는 조건부로 블록을 렌더링 하는 데 사용됩니다. 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링됩니다.
- v-else 디렉티브를 사용하여 v-if에 대한 'else 블록'을 나타낼 수 있습니다.
- v-else-if 디렉티브는 이름에서 알 수 있듯이 v-if에 대한 'else if 블록 역할'을 합니다. 여러 번 연결될 수도 있습니다.
- v-else-if 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 다음에 와야 합니다.
2. v-show 조건부 렌더링
두 번째는 v-show 디렉티브입니다.
- v-show 의 사용법은 v-if 와 대체로 동일합니다.
- 다만, v-if 와의 차이점은 v-show 가 있는 엘리먼트는 항상 렌더링되어 DOM 에 남아 있다는 것입니다.
- v-show 는 엘리먼트의 display CSS 속성만 전환합니다.
v-if vs v-show
v-if 는 '실제' 조건부 렌더링입니다. 조건부 블록이 전환될 경우, 블록 내 이벤트 리스너와 자식 컴포넌트가 제대로 제거되거나 재생성되기 때문입니다. 또한, v-if 는 초기 조건이 false 이면, 아무 작업도 수행하지 않습니다. 조건부 블록은 조건이 true 가 될 때까지 렌더링 되지 않는거죠.
이에 비해 v-show 는 훨씬 간단합니다. 엘리먼트는 CSS 기반으로 전환되므로 초기 조건과 관계없이 항상 렌더링됩니다.
일반적으로 v-if 는 전환 비용이 더 높고, v-show 는 초기 렌더링 비용이 더 높습니다. 따라서 매우 자주 전환해야 하는 경우는 v-show 를, 실행 중에 조건이 변경되지 않는 경우는 v-if 를 사용하는 것이 좋습니다.
참고로 v-if 디렉티브와 v-for 디렉티브를 함께 사용하는 것을 권장하지 않습니다. 만약, 같이 사용된다면, v-if 가 먼저 평가됩니다.
리스트 렌더링
리스트 렌더링이란 배열 데이터를 기반으로 동일한 구조의 UI 를 반복호출하는 기능을 말합니다.
리스트 렌더링은 v-for 디렉티브를 사용합니다.
v-for 리스트 렌더링
- v-for 디렉티브를 사용해 배열을 리스트로 렌더링을 할 수 있습니다.
- v-for 디렉티브는 item in items 형식의 특별한 문법이 필요합니다. (item: 배열 내 반복되는 엘리먼트의 별칭 / items: 선언한 배열 데이터)
- v-for 를 객체의 속성을 반복하는 데 사용가능합니다.
- 순회순서: 해당 객체를 Object.keys() 를 호출한 결과에 기반합니다.
const items = ref([{ message: "Foo" }, { message: "Bar" }])<li v-for="item in items">
{{ itme.message }}
</li>
'Vue.js' 카테고리의 다른 글
| Vue.js 핵심문법 2 - Data (0) | 2024.05.28 |
|---|---|
| Vue.js 라이프사이클 (0) | 2024.05.02 |
| Vue.js 개발스타일 (0) | 2024.05.02 |
| Vue.js 의 정의와 구조파악 (0) | 2024.05.01 |
| Vue 를 사용하는 이유 (1) | 2024.05.01 |
