18. jQuery와 React, Vue-3

#3  Vue 프레임워크

Vue.js는 MVVM(Model-View-ViewModel) 패턴을 기반으로 한 프레임워크로, 뷰 레이어와 모델 레이어 간의 양방향 데이터 바인딩과 컴포넌트 기반 아키텍처를 통해 웹 어플리케이션을 구축할 수 있습니다. 이번 섹션에서는 Vue.js의 주요 기능들에 대해서 알아보겠습니다.

인스턴스

Vue.js를 사용하기 위해서는 인스턴스를 생성해야 합니다. 인스턴스는 Vue.js 애플리케이션의 진입점이며, 옵션 객체를 전달하여 생성할 수 있습니다.

var app = new Vue({
  // 옵션
})

데이터 바인딩

Vue.js에서 가장 핵심적인 개념 중 하나는 데이터 바인딩입니다. Vue.js는 데이터와 DOM 요소를 연결하여 데이터가 변경될 때마다 자동으로 화면을 갱신합니다. 이러한 기능을 Reactive System이라고도 합니다.

Vue.js에서는 머스태시(Mustache) 문법을 사용하여 데이터 바인딩을 처리합니다.

<div id="app">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

위 코드에서 message 변수의 값이 변경될 때마다 해당 값을 출력하는 요소의 내용도 함께 변경됩니다.

디렉티브

Vue.js에서는 디렉티브(Directive)를 사용하여 DOM 요소의 속성값을 동적으로 변경할 수 있습니다. v- 접두사를 사용하여 디렉티브를 정의합니다.

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <button v-on:click="toggleMessage">Toggle message</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    showMessage: true
  },
  methods: {
    toggleMessage: function () {
      this.showMessage = !this.showMessage
    }
  }
})

위 코드에서 v-if 디렉티브를 사용하여 조건에 따라 요소를 표시하거나 감춥니다. v-on 디렉티브를 사용하여 이벤트를 처리할 수 있습니다.

컴포넌트

Vue에서 컴포넌트란 재사용 가능한 코드 조각입니다. 컴포넌트는 뷰 인스턴스와 마찬가지로 데이터, 메서드, 컴포넌트 간 통신 기능 등을 가지고 있습니다. 이를 통해 코드의 재사용성이 높아지며 유지보수성이 좋아집니다.

컴포넌트를 정의하는 방법은 다음과 같습니다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    message: String,
  },
  methods: {
    handleClick() {
      console.log('button clicked')
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

위 코드는 MyComponent라는 이름을 가진 컴포넌트를 정의한 것입니다. template 태그는 해당 컴포넌트가 렌더링될 HTML 코드를 작성하는 곳입니다. script 태그에서는 컴포넌트의 로직을 작성하고, export default 구문을 이용해 컴포넌트를 내보냅니다. props 속성은 부모 컴포넌트로부터 받은 데이터를 정의합니다. methods 속성은 해당 컴포넌트에서 사용하는 메서드를 정의합니다. 마지막으로 style 태그에서는 해당 컴포넌트에만 적용되는 CSS 스타일을 작성할 수 있습니다.

컴포넌트를 사용하는 방법은 다음과 같습니다.

<template>
  <div>
    <my-component title="Hello" message="world"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

위 코드에서 components 속성에서 MyComponent를 등록합니다. 이제 App 컴포넌트에서 my-component 태그를 사용할 수 있습니다. title과 message 속성을 이용해 데이터를 전달합니다.

 

Vue에 대한 더 자세한 내용은 다른 카테고리에서 다시 다루겠습니다.