[Vue] Vue 디렉티브 (Directive)

in JS Technology on Vue.js
[Vue] Vue 디렉티브 (Directive)

Vue의 기본 디렉티브를 예제를 통해 알아보자.

1. 디렉티브(Directive)란

번역을 하면 “지시” 라는 뜻을 가지며, Vue.js 에서는 엘리먼트에서 사용되는 특별한 속성입니다. 정리 하자면 디렉티브(Directive)는 HTML 태그안에 들어가는 하나의 속성이며 ‘V-‘ 라는 앞글자를 지니고 있습니다.

디렉티브는 속성으로 다루어지며 Vue에서 기본적으로 제공되는 기본 디렉티브와 사용자가 만든 디렉티브가 있습니다. 이 포스팅에서는 기본적으로 제공되는 기본 디렉티브에 대해서 기본개념과 간단한 예제로 동작원리를 학습하는데 중점을 두겠습니다.

2.기본 디렉티브의 종류

디렉티브의 종류는 다양하며 그 쓰임세도 다 제각각 입니다. 그렇다면 목차로써의 디렉티브 종류는 어떠한 것들이 있는지 살펴볼까요

가 있습니다.

3.기본 디렉티브의 개념및 예제

이번 단락의 내용은 길어질 수 있으니 필요한 부분만 학습 하시길 바랍니다. 이번포스팅에서는 v-text ~ v-for 까지만 다루며 v-on, v-bind, v-model 은 각각 개별 포스팅으로 찾아 뵙겠습니다.

3-1.v-text 디렉티브

<span> { { name } } <span>

v-text 디렉티브는 위의 코드와 같은 동작을 하는 코드를

<span v-text="name"><span>

의 형태로 바꿀수 있는 디렉티브입니다.

코드의 형태는 어떻게 나타 나는지 확인해 볼까요?

여기서 코드 제공 형태는 .vue 파일 형태인 SFC 형태의 소스코드가 아닌 html 코드 형태로 제공합니다.

<body>
  <div id="app">  
    <span>{{ name }}</span> 
    <br />
    <span v-text="name"></span>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        name: 'manbalboy'
      }
    })
  </script>
</body>

위의 코드를 실행 하면

See the Pen Vue-v-text by Jung Hun (@manbalboy) on CodePen.

이렇게 코드가 동작되는 것을 알 수 있습니다.

3-2.v-html 디렉티브

그렇다면 Data 형태가 마크업 형태로 되어 있다면 어떻게 될까요? 예를들어 v-text 디렉티브 코드에서 name 의 값이 ’<b> manbalboy <b>‘ 형태의 값으로 되어있을때 그 값을 태그로 표현되고 싶을때 사용 하는 디렉티브가 바로 v-html 디렉티브입니다.

코드의 형태를 살펴 볼까요?

<body>
  <div id="app">  
    v-html X : <span>{{ name }}</span> 
    <br />
    v-html O : <span v-html="name"></span>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        name: '<b>manbalboy</b>'
      }
    })
  </script>
</body>

위의 결과값은 아래의 codepen 을 직접 구동시켜 확인해보세요 위의 span에서는 그냥 문자열 그대로 출력한것을 확인할수 있고 v-html 디렉티브를 적용한 sapn 에서는 b tag 가 적용된 굵은 글씨로 표현되는 것을 알 수 있습니다.

See the Pen 2021-04-25-vue01-v-html by Jung Hun (@manbalboy) on CodePen.

3-3.v-show 디렉티브

v-show 디렉티브는 상태값에 따라서 element 를 보여지고 안보여지게 하는 디렉티브입니다. display:none 형태가 되는 것일뿐 코드가 삭제되어서 보여지는것은 아닙니다. 코드내에서 자주 토글될 경우에 v-show 디렉티브를 자주 사용될것 같지 않다면 v-if 를 사용하는게 퍼포먼스 측면에서 좋습니다.

예제로 살펴볼까요?

<body>
  <div id="app">  
    <button @click="toggleClick">toggle</button>
    <span v-show="toggle">v-show 예제</span>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
    el: "#app",
    data: {
        toggle: true
    },
    methods: {
        toggleClick() {
            this.toggle = !this.toggle;
        }
    }
    });
  </script>
</body>

버튼을 클릭시 span 이 나타났다 사라졌다 하는 예제입니다.

See the Pen 2021-04-25-vue01-v-show by Jung Hun (@manbalboy) on CodePen.

3-4.v-if 디렉티브

v-if 는 프로그래밍 언어의 if 문을 쉽게 떠올리면 되겠습니다 상태값에 따라 요소를 그려주는 디렉티브로 v-else v-else-if 랑 함께 사용 됨으로 v-else 와 v-else-if 도 이번 절에서 함께 다루겠습니다.

v-if 는 v-show 와 다르게 엘리먼트를 삭제시키고 다시 랜더링하므로 앞서 v-show 에서 소개해왔던 것처럼 자주 상태변경이 일어나는 것들은 v-show 가 유리하고 빈번하게 일어나지 않으면 v-if 가 유리합니다.

또한 하나의 엘리먼트 요소에 앞으로 배울 v-for 디렉티브와 함께 사용하는 것은 권장되지 않습니다.

v-else 와 v-else-if 디렉티브는 이전 요소들이 v-if 이여야 하기때문에 v-if 에 종속적이라고 할 수 있습니다.

예제를 살펴 볼까요?

<body>
    <div id="app">
        <input v-model="type" />
        <br>
        <span v-if="type == 'A'">v-if / type : A</span>
        <span v-else-if="type == 'B'">v-else-if / type : B</span>
        <span v-else-if="type == 'C'">v-else-if / type : C</span>
        <span v-else>v-else / type : undefined</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                type: ''
            },
        });
    </script>
</body>

위의 코드는 인풋박스에 A, B, C 그리고 다른 타입을 입력하면 해당 element 가 표출 되는 예제입니다. 코드로 이해 안 가시는 분들은 아래의 codepen 으로 이것 저것 바꿔 보시면서 감을 익히시는 것을 추천 드립니다.

See the Pen 2021-04-25-vue01-v-if by Jung Hun (@manbalboy) on CodePen.

3-5.v-for 디렉티브

v-for 디렉티브는 for문을 생각하시면 참 쉽습니다. v-for 디렉티브는 v-bind:key 와 같이 사용하는 것을 원칙으로 합니다. 고유한 키값이있다면 그 키값으로 :key 를 등록 해주거나 key 값이 없다면 index 를 등록해주시길 바랍니다.

<body>
    <div id="app">
        구구단
        <p v-for="index in 9" :key="index">
            구구단  단
            <br>
            
            <span v-for="(item,arrayIndex) in arrayObj" :key="arrayIndex">
                {{ index }} * {{item}} = {{ item * index }} 
              
              <br>
            </span>
        
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                arrayObj: [1,2,3,4,5,6,7,8,9]
            }
        });
    </script>
</body>

위의 코드는 v-for 를 활용해 구구단을 출력하는 간단한 예제 입니다.

해당 동작이 어떻게 일어나는지 아래의 코드를 통해 확인해 보시기 바랍니다.

See the Pen 2021-04-25-vue01-v-for by Jung Hun (@manbalboy) on CodePen.

3. 정리

이번포스팅에서는 몇가지의 디렉티브에 대해서 살펴 보았는데요 v-show, v-if, v-for, v-text, v-html 모두 활용가치가 높으므로 확실히 이해하시고 넘어가시는 것을 추천드립니다. 추후에 v-on, v-bind, v-model 등 남은 디렉티브는 포스팅 할 예정입니다.

© 2021. All rights reserved.