Vue 3.0/02.Essentials

[vue 3] 02.Text Interpolation

Vue는 HTML 기반의 템플릿 구문을 사용하는데 렌더링된 DOM에 컴포넌트의 데이터를 결합해서 출력하는 방식이다. 이 템플릿을 사용하는 방식에는 text interpolation(보간법)과 다양한 directive 들이 사용된다.

이번 포스트에서는 먼저 text interpolation에 대해서 살펴보자.

Text Interpolation

콧수염 표현식

뷰는 Model등 데이터를 화면에 표현하기 위해 보간법(補間法: Text interpolation)을 사용한다. 보간법은 '보수하다'의 補에 '사이' 間을 쓴다. 즉 어떤 사이를 보수하는 방법인데 특정 위치에 새로운 데이터를 추가하는 방식이다.

뷰에서 데이터가 추가될 위치를 표시할 때는 {{표현식}} 처럼 표현식을 중괄호 2개로 감싸서 사용한다. 이게 콧수염을 닮아서인지 콧수염 표현식(Mustache Expression)이라고 부른다.

표현식 부분에는 단순한 값 뿐 아니라 자바스크립트 호출이나 연산도 가능하다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>모두의 코딩</title>
  </head>
  <body>
    <div id="app">
      <ol>
        <li>그대로 출력하기: {{message}}</li>
        <li>대문자로 출력하기: {{message.toUpperCase()}}</li>
        <li>문자열의 길이 출력하기: {{ message.length + 4}}</li>
      </ol>
    </div>
  </body>
</html>
<script src="https://unpkg.com/vue@3"></script>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const message = ref("Hello");
      return {
        message,
      };
    },
  }).mount("#app");
</script>

Vue 객체의 유효 범위

Vue 객체가 적용되는 HTML의 범위는 mount 함수에서 지정된 영역으로 한정된다. 만약 지정된 범위를 벗어나서 콧수염 표현식을 쓴다면 당연히 Vue는 대체하지 못하고 그냥 콧수염 자체로 표현할 뿐이다.

directive 활용

directive(지시자)

directive는 Vue에서 view에 데이터 표현 등의 용도로 사용되는 특별한 속성을 의미한다. 즉 HTML 태그에 사용되는 속성으로 기본적으로 v-를 접두어로 갖는다.

directive는 [이름]:[전달인자].[수식어]=[값]의 형태를 갖는다.

주요 directive를 용도별로 구별해보면 다음과 같으며 전달인자, 수식어는 directive의 종류에 따라 다르다.

값의 표현: v-text, v-html, v-once, v-bind, v-model
제어문: v-if, v-else, v-else-if, v-show, v-for
이벤트 처리: v-on

이들 directive에 대해서 하나씩 알아보자.

v-text, v-html, v-once

이 3개의 directive는 각각 값을 출력하기 위해 사용된다.

디렉티브	설명
v-text	{{}}와 마찬가지로 innerText 속성에 연결되며 Model의 값을 문자열 그대로 표현. Model과의 반응성이 유지됨
v-html	innerHTML 속성에 연결되며 Model의 값 중 html 태그를 파싱해서 화면에 나타냄. Model과의 반응성이 유지됨
v-once	단독으로 사용되지 않고 v-text,v-html와 함께 사용되며 v-once는 한번 연동 후 반응성이 제거됨

v-text나 v-html은 각각 innerText와 innerHTML 속성에 Model의 값을 연결한다. 따라서 그냥 문자열로 출력하거나 html 태그를 파싱해서 출력한다. 이때 값으로는 {{}} 처럼 model의 값 뿐 아니라 표현식으로 연산, 메서드 호출 등을 사용할 수 있다.

한가지 고려할 점은 v-html의 경우 XSS 위험이 있기 때문에 사용자가 입력한 값을 처리할 때는 v-text의 사용을 권장한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>모두의 코딩</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li>{{`오늘의 메시지: ${message}`}}</li>
        <li v-html="message"></li>
        <li v-text="message.toUpperCase()"></li>
        <li v-once>{{message}}</li>
      </ul>
    </div>
  </body>
</html>
<script src="https://unpkg.com/vue@3"></script>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const message = ref('<h1>Hi Vue</h1>');
      return {
        message,
      };
    },
  }).mount('#app');
</script>

저작자표시 비영리 변경금지

'Vue 3.0 > 02.Essentials' 카테고리의 다른 글

[vue 3] 06.v-for (0)	2022.06.25
[vue 3] 05.조건문을 위한 v-if, v-show (0)	2022.06.24
[vue 3] 04. v-bind를 통한 속성 처리 (0)	2022.06.23
[vue 3] 03. 반응성(Reactivity) (0)	2022.06.22
[vue 3] 01. Vue Application 생성 (0)	2022.06.20

Contents

새소식