홈페이지 유튜브

template

Vue template 출력

Vue template은 사용중인 Vue data를 화면(View)에 출력할 수 있는 방법을 말한다.

Mustache 구문

Mustache 구문은 이중 중괄호를 사용한 텍스트 출력 방식이다. {{data}} 형식으로 사용한다. 출력된 값은 수정해도 data에 반영되지 않는다. 이는 단방향 연결로 볼 수 있다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model example</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        
        <h1>한줄평 작성</h1>
        <input type="text" placeholder="한줄평 작성" v-model="comment">
        <h4>{{comment}}</h4>
        <h4>글자수 : {{comment.length}}</h4>

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    comment:"", 
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

예제를 실행하면 입력창의 입력값이 변화함에 따라 하단 영역의 글자와 글자 수가 달라지는 것을 확인할 수 있다. v-model과 다르게 template 구문에서는 값의 변화를 줄 수 없다. 또한 v-model은 입력창에 사용하지만 template 구문은 입력창 외의 다른 영역에 적용할 수 있다는 특징을 가진다. 또한 계산식을 지원하므로 필요한 계산을 출력 구문 내에서 수행할 수 있다.

v-bind directive

directive는 태그에 작성할 수 있도록 만들어진 특수 속성을 말한다. VueJS의 directive는 v- 로시작한다.

v-bind directive를 통해 태그에 원하는 형태의 값을 추가할 수 있다. 먼저 다음 두 개의 directive를 비교해본다.

  • v-html

  • v-text

「v-html」 vs 「v-text」

v-html과 v-text 모두 영역 내부에 값을 추가하는 directive이다.

  • v-html - 해당 영역 내부에 html을 추가

  • v-text - 해당 영역 내부에 text를 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue template example</title>
    <style>
        textarea {
            width: 400px;
            height:150px;
            resize: none;
            font-size: 20px;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <h1>글자 입력</h1>
        <textarea v-model="sample" v-on:input="sample = $event.target.value"></textarea>
        
        <h2>v-html</h2>
        <div v-html="sample"></div>

        <h2>v-text</h2>
        <div v-text="sample"></div>
        
        <h2>mustache</h2>
        <div>{{sample}}</div>
        

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    sample:"", 
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

실행해서 글자를 입력해보면 차이점을 알 수 있다.

v-html은 HTML 코드를 렌더링하지만 v-text와 mustache 출력구문은 이를 렌더링하지 않고 글자로 출력한다. <script> 등의 태그도 해석하기 때문에 사용 시 Content Security Policy 설정 등을 추가하고 사용할 것을 권장한다.

「v-text」 vs 「mustache」

위의 예제에서 v-text="sample"과 {{sample}}은 차이가 없어 보인다. 둘 다 설정된 값을 글자로 표시하기 때문에 본질적으로는 같지만 정말 아무런 차이가 없을까?

위의 그림에서 볼 수 있듯이 페이지 새로고침을 하게 되면 미세하게 차이점이 나타난다.

Vue는 구조적으로 사용자 화면에서 렌더링을 하게 되므로 작성한 Vue 구문이 Vue application의 준비 시간동안 사용자의 화면에 노출되는 치명적인 문제점을 가지고 있다.

이러한 클라이언틀 렌더링은 사용자에게 불편한 인상을 줄 수 있다. 그렇다면 만약 data의 초기값이 있을 경우는 어떤 출력 차이가 있을까?

v-text를 이용하여 출력하는 것이 훨씬 더 깔끔하다는 것을 알 수 있다. 하지만 v-text 역시 글자가 없는 상태에서 갑자기 나타나므로 mustache 구문보다는 낫겠지만 사용자에게 어색함을 주기에 충분하다. 따라서 이 경우 예상 가능한 높이를 미리 부여하여 화면의 흔들림이 발생하지 않도록 처리하는 것이 중요하다.

높이 계산이 어려운 경우에는 더미 텍스트를 작성해두어도 되지만 가급적 사용자가 보는 화면에 필요없는 글자나 코드가 노출되지 않도록 신경쓰는 것이 사용성 개선을 위한 방법이 될 것이다.

Previousv-modelNextcomputed

Last updated