태그 속성을 연결하는 v-bind

이전에 HTML 태그를 사용하여 간단한 메뉴 바를 만들었습니다. 그러나 href 속성 값이 비어 있고, 스타일도 적용되지 않아서 허전한 느낌이 듭니다. 이번에는 스타일을 적용하고 속성 값도 추가하여 더욱 보기 좋은 메뉴 바를 만들어 보겠습니다.

메뉴 바에 스타일 적용하기

먼저 CSS 파일을 만들겠습니다. src 폴더 내부에 assets라는 폴더를 만듭니다. 이 폴더는 Vue 프로젝트에서 사용되는 이미지, 폰트, CSS 파일 등을 보관하는 폴더입니다. 여기에 style.css 파일을 넣어주세요.

간단하게 메뉴바에 스타일을 적용해보겠습니다. 이 부분에 대해서는 다른 스타일을 적용해도 괜찮습니다!

css

style.css

      .menu {
  background-color: #444;
  font-weight: bold;
  padding: 8px 10px;
  border-radius: 5px;
}

.category {
  margin: 0 10px;

	/* a 태그 기본 스타일 제거 */
  color: white;
  text-decoration: none;
}

.category:hover {
  color: rgb(135, 225, 255);
}

그리고 index.html 파일에서 이 CSS 파일을 불러오도록 하겠습니다.

html

index.html

      <!-- ... -->
<div id="app"></div>


<script type="module" src="./src/main.js"></script>
<!-- 스타일 추가 -->
<link rel="stylesheet" href="./src/assets/style.css" />
<!-- ... -->

뭔가 그럴듯한 메뉴바가 완성되었네요!

이제 이 버튼들이 적절한 문서로 이동할 수 있도록 링크를 추가해야 합니다. 링크 값을 직접 넣는 것도 방법이지만, categories 값을 가져와서 넣는 편리한 방법이 있습니다. 이 방법은 바로 v-bind 디렉티브를 사용하는 것입니다.

디렉티브 (Directive) 란?

Vue에서 디렉티브(Directive)란 HTML 태그 내에서 v-xx 형태로 사용되는 특수한 속성입니다. 이 속성들은 템플릿 문법으로, 실제 브라우저에서는 나타나지 않지만, DOM을 변화시키거나 이벤트 처리 등을 수행합니다.

Vue에서 제공하는 디렉티브에는 다음과 같은 것들이 있습니다.

v-bind: 속성 또는 속성값을 변화시킴

v-if: 조건에 따라 태그 없애거나 보이기

v-show: 조건부 따라 태그 숨기거나 보이기

v-for: 반복해서 여러 개 태그 그리기

v-on: 이벤트 처리

v-model : 사용자 입력을 컴포넌트 데이터에 반영하거나 데이터를 사용자 입력에 반영

오늘은 이 디렉티브 중에 태그 속성에 관여하는 v-bind에 대해 알아볼겁니다.

      컴포넌트 데이터를 DOM과 연결하는 것을 데이터 바인딩이라고 합니다. 이러한 기능 덕분에 데이터만 변경해도 DOM을 따로 신경쓰지 않아도 되는 장점이 있습니다. 이전에 다루었던 콧수염 문법도 데이터 바인딩의 일종입니다!

v-bind

콧수염 문법은 컴포넌트 데이터와 태그 내용을 연결해주었습니다.

v-bind는 속성명과, 속성값을 연결할 수 있습니다.

문법

연결할 속성 앞에 v-bind: 또는 단축어인 :를 붙여주면 됩니다.

html

      <tag v-bind:속성="값"></tag>
<!-- 위 아래 동일하게 동작 -->
<tag :속성="값"></tag>

이렇게 v-bind가 들어간 순간 쌍따옴표(“”) 사이에 들어가는 값은 단순한 문자열이 아닌 Javascript 표현식으로 인식합니다. 마치 이전의 콧수염 문법처럼요.

속성값 바꾸기

예를 들어, myClass 라는 값을 만들고 v-bind를 적용하면 myClass가 가지고 있던 active 값이 속성값으로 들어갑니다.

javascript

      export default {
  template: `<p v-bind:class="myClass">Hello</p>`,
  setup() {
    return {
      myClass: "active",
    };
  },
};

JavaScript 문법이 적용되기 때문에, 문자열을 직접 넣고 싶은 경우에는 역따옴표(`)나 따옴표(')를 사용하면 됩니다.

javascript

      template: '<p v-bind:class="`menu-` + myClass">Hello</p>',
// 위와 동일
template: '<p v-bind:class="`menu-${myClass}`">Hello</p>',

      바깥부터 따옴표, 쌍따옴표, 역따옴표 순으로 사용하고 있습니다. 잘 구분해주세요.

속성명 바꾸기

속성값 뿐만 아니라, 바꾸고자 하는 속성 자체도 컴포넌트 데이터로 결정할 수 있습니다.

html

      <tag v-bind:[값]=""></tag>

예를 들어, 적용하고자 하는 속성 값은 attr 컴포넌트 데이터로 결정할 수 있습니다.

javascript

      export default {
  template: '<p v-bind:[attr]="`greet`">Hello</p>',
  setup() {
    return {
      attr: "id",
    };
  },
};

attr가 id이기 때문에 속성명은 id이며, greet이란 문자열을 넣어줬기 때문에 속성값은 greet이 되었습니다.

응용

속성명과 속성값을 동시에 바꿀 수 있습니다

v-bind를 여러 개도 사용가능합니다.

class는 객체로 전달해서 클래스 이름: 조건 에 따라 원하는 클래스만 나타나도록 할 수 있습니다.

style도 객체로 전달해서 속성: 값 에 따라 원하는 스타일을 여러 개 넣을 수 있습니다.

javascript

      export default {
  template: `<p 
    v-bind:[attr]="idValue" 
    v-bind:style="myStyle"
    :class="myClass"
  >
    Hello
  </p>`,
  setup() {
    return {
      attr: "id",
      attrVal: "idValue",
      myClass: {
        active: true,
        disabled: false,
      },
      myStyle: {
        color: "red",
        "background-color": "black",
      },
    };
  },
};

class와 style의 경우 더 다양한 방식으로 전달할 수 있습니다. 하지만 지금 활용하기에 너무 깊은 내용이기 때문에 자세한 내용이 궁금한 경우는 아래 링크를 참조해주시기 바랍니다.

메뉴 바 href 추가하기

이제 메뉴 바 버튼들에 href를 어떻게 추가할 지 감이 잡히시나요? HTML, CSS, Javascript를 각각 클릭했을 때 다음과 같이 이동해야합니다.

HTML 클릭 → /html 로 이동

CSS 클릭 → /css 로 이동

Javascript 클릭 → /javascript 로 이동

일반적으로 URL은 영어 소문자로 사용하기 때문에, 이를 소문자로 바꿔주어야 합니다. toLowerCase 함수를 사용하면 됩니다.

javascript

      // HTML -> html
categories[0].toLowerCase()

또한 앞에 슬래시(/)를 붙여서 현재 URL + /… 주소로 이동해줍니다. 예를 들어 현재 주소가 http://127.0.0.1:5500 이였다면

/html → http://127.0.0.1:5500/html

/css → http://127.0.0.1:5500/css

/js → http://127.0.0.1:5500/js

이 됩니다. 그러면 최종적으로 다음과 같이 넣어주면 됩니다.

javascript

      // HTML -> /html
'/' + categories[0].toLowerCase()

v-bind 를 이용한다면 첫 번째 a 태그는 다음과 같이 되어야합니다.

html

      <a 
  :href="'/' + categories[0].toLowerCase()" 
  class="category"
> 
  {{ categories[0] }}
</a>

이제 전체 코드를 한 번 볼까요?

javascript

App.js

      export default {
  template: `
    <nav class="menu">
      <a 
        :href="'/' + categories[0].toLowerCase()" 
        class="category"
      > 
        {{ categories[0] }}
      </a>
      <a 
        :href="'/' + categories[1].toLowerCase()" 
        class="category"
      > 
        {{ categories[1] }}
      </a>
      <a 
        :href="'/' + categories[2].toLowerCase()" 
        class="category"
      > 
        {{ categories[2] }}
      </a>
    </nav>
	`,

  setup() {
    const categories = ["HTML", "CSS", "Javascript"];
    return {
      categories,
    };
  },
};

우리가 의도했던대로 href 값이 잘 들어갔습니다. HTML을 클릭해보면 해당 페이지를 아직 만들지 않았기 때문에 아무것도 나오지 않습니다.

이 페이지들은 추후에 만들어보겠습니다.

하지만 먼저 수행해야 할 작업이 있습니다. 그것은 바로 이 긴 HTML 코드를 수정하는 것입니다! 예를 들어, 현재는 categories 값이 3개입니다. 그러나 나중에는 10개가 될 수도 있습니다. 그렇다면 카테고리 개수만큼 a 태그를 추가해야하고, 만약에 URL을 /category/...처럼 수정해야 한다면 카테고리 개수만큼 모두 일일이 바꿔줘야 하는 번거로움이 있습니다.

이런 문제를 어떻게 해결하면 좋을지 다음 글에서 자세히 다뤄보도록 하겠습니다.