v-html / v-for / v-if / v-show / v-on 정의 및 코드

최근 Vue.js 와 API 통신을 활용한 간단한 미니 프로젝트를 진행한 적이 있었다. 그리고 공식문서를 활용해보며 Vue.js 라이프사이클 훅을 짧게 살펴봄으로써 우리가 외부 api 데이터를 불러왔을 때, 변경된 자료를 어떻게 화면에 뿌려줄 수 있는 지를 살펴보았다.

또한 미니 프로젝트든, 대형 프로젝트든 상관없이 사용하는 코드는 뷰 개발자라면 Vue에서 제공하는 공식 문서 내용을 토대로 활용해야 하기 때문에 프로그래밍에 정답은 없지만, 기초지식을 쌓고 활용해야 한다는 것에는 모두가 이견이 없을 것이다.

그래서 오늘은 Vue로 만들어보고 있는 미니 프로젝트에서 궁금했던 점을 한 번 살펴보고자 한다.

---

📌 Vue.js 디렉티브가 뭐야?

디렉티브의 영단어를 살펴보면 Directives이다. 직독 직해해보면 뜻이다. 쉽게 얘기해서 Vue.js Directives는 vue.js에서 제공하는 지시사항, 즉 문법이라고 이해하면 좋을 것 같다.

그래서 오늘 살펴볼 디렉티브는 v-html , v-for , v-if , v-show , v-on 이렇게 5가지이다.

✅ 1. v-html

v-html은 요소의 innerHTML을 업데이트한다. 콘텐츠는 일반적으로 HTML로 삽입이 되고, Vue 템플릿으로 컴파일되지 않는다고 한다. 나는 v-html을 활용해 받아 온 데이터 별로 배경 이미지만 바꿔주는 용도로 활용하려 했는데, 공식 문서를 보니 이런 말이 있다.
중요한 데이터는 v-html 방식으로 데이터 바인딩시키면 안 될 것 같다.

웹 사이트에서 임의의 HTML을 동적으로 렌더링 하면 XSS 공격 (opens new window)을 쉽게 발생시킬 수 있으므로 매우 위험합니다. 신뢰할 수 있는 콘텐츠에는 v-html을 사용하고 사용자가 제공한 콘텐츠에는 절대로 사용하지 마세요.

✅ 2. v-for

Vue 뿐만 아니라 실제 개발을 하다 보면 다중 데이터를 처리해야 할 일이 자주 발생한다. 내가 읽고 있는 서적에선 보통 select의 option, table의 tr 데이터 등 반복되는 객체를 처리할 때라고 한다. 쉽게 얘기해보면, 사용자가 동일한 UI 패턴에 데이터만 다르게 처리되는 부분들이 다중 데이터를 이용해서 처리되는 부분이라고 생각하면 된다. 반복문과 같은 개념이다.

그래서 배열 데이터는 v-for 디렉티브를 이용해서 바인딩할 수 있는데, 반복적으로 랜더링 할 html 태그에 v-for 디렉티브를 사용하면 배열에 있는 데이터 수만큼 html 태그를 반복적으로 랜더링 하게 된다.

따라서 날씨 api를 활용하는 나의 경우를 빗대어 보자면, 아래 코드 리뷰와 같이 template 부분에 뿌려 줄 api 데이터를 반환시켜줄 data의 return 안에 weathers라는 배열을 만들어준 다음 이 배열을 가지고, v-for을 사용하여 한 번의 코드로 24시간, 48시간 등과 같이 코드를 길게 작성하지 않고 v-for 디렉티브 하나로 해결했다.

v-for = "(item, index) in items" 형식으로 사용한다.
여기서 items는 데이터 배열의 이름으로 사용자에 따라 바뀔 수 있다.
각 아이템을 item으로, 배열의 현재 index를 index로 받아 반환해 준다.

✅ 3. v-if와 v-show

나는 아직 v-if와 v-show를 내가 직접 짠 코드 안에서 활용해 본 적은 없다. 조만간 v-if을 통해 Today Weather와 Tomorrow Weather를 나타내는 레이아웃에 조건을 걸어줘야 하기 때문에 사용할 듯 하지만, 아무튼 v-if 는 자바스크립트의 if문과 같다고 생각하면 된다.

추후에 직접 프로그래밍을 통해 상세하게 설명할 테지만, v-if와 v-show의 차이점 은 v-if의 경우 조건을 만족하면 그 순간에 html 블록이 생성되고, 조건에 불만족하면 html 블록은 삭제된다. 그러나 v-show는 조건 만족 여부에 상관없이 무조건 html 블록이 생성된다. v-show는 css display를 이용해서 화면에서 보이기도 하며, 보이지 않기도 한다.

v-if와 v-show를 사용할 때는 해당 html 블록이 화면 내에서 자주 toggle이 일어나면 v-show을 사용하고, toggle이 일어나는 빈도가 작다면 v-if를 사용하는 것이 좋다.

✅ 4. v-on

Vue.js 컴포넌트 내에서 어떠한 이벤트를 실행할 때, v-on 디렉티브를 활용한다. 코드를 작성하다 보면 prettier에 의해 자동으로 v-on 디렉티브가 @ 표시로 바뀌는 걸 볼 수 있을 텐데, 이는 같은 의미이니 크게 동요할 필요 없다.

Click 이벤트 : v-on:click=" 메소드명 " 👉 @click=" 메서드명 "
Change 이벤트 : @change= " 메소드명 " 👉 html의 select 태그에서 option을 바꿀 때 자주 사용한다.
Key 이벤트 : Key 이벤트는 사용자가 키보드 자판을 입력할 때 발생하는 이벤트

 

이렇게 오늘은 가볍게(?) Vue.js에서 제공하는 디렉티브를 살펴봤다. 생각보다 5가지 디렉티브 모두 활용도가 높기 때문에 되도록 정확하게 숙지하면 보다 Vue.js를 활용하는데 도움이 될 것이라 생각한다.

 

https://www.youtube.com/watch?v=cSH97mtk7MU