Vue.js 입문 # 2

728x90

화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트

데이터 (Data): 뷰 인스턴스는 앱의 데이터 상태를 저장하고 관리하는 역할을 합니다. 이 데이터는 앱의 화면에 표시되는 정보와 사용자 상호작용에 사용됩니다.

메서드 (Methods): 뷰 인스턴스에는 데이터를 조작하고 뷰와 상호작용하는 메서드를 정의할 수 있습니다. 이러한 메서드는 템플릿에서 호출되거나 이벤트 핸들러로 사용됩니다.

라이프사이클 이벤트 (Lifecycle Events): 뷰 인스턴스는 라이프사이클 이벤트(생성, 갱신, 소멸 등)를 제공하여 앱의 다양한 단계에서 코드를 실행할 수 있도록 합니다.

템플릿 (Template): 뷰 인스턴스에는 HTML 기반의 템플릿을 포함할 수 있습니다. 이 템플릿은 데이터와 연결되어 화면에 렌더링됩니다.

디렉티브 (Directives): 뷰 인스턴스는 디렉티브를 사용하여 HTML 요소에 특별한 동작을 적용할 수 있습니다. 예를 들어, v-if, v-for, v-bind, v-on 등의 디렉티브를 사용하여 조건부 렌더링, 리스트 렌더링, 속성 바인딩, 이벤트 핸들링을 수행할 수 있습니다.

컴포넌트 (Components): 뷰 인스턴스는 컴포넌트의 부모 역할을 수행하며, 여러 개의 컴포넌트를 조합하여 앱을 구성하는 데 사용됩니다.

App.vue 예제 코드

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello, Vue.js!" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue 예제 코드의 <template> 섹션

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello, Vue.js!" />
  </div>
</template>

<template> 섹션: 이 섹션은 화면에 표시될 HTML 템플릿을 정의합니다. div 요소에는 id가 "app"이며, 그 내부에는 img 요소와 HelloWorld 컴포넌트가 포함되어 있습니다. img 요소는 Vue.js 로고를 나타내며, HelloWorld 컴포넌트는 "Hello, Vue.js!" 메시지를 전달받아 표시합니다.

App.vue 예제 코드 <script> 섹션

<script>
import HelloWorld from './components/HelloWorld.vue'

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

App.vue 예제코드 <style> 섹션

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Message 값을 변경한 라이프 사이클 실습 예제 (public/index.html), (src/App.vue)

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      {{ message }}
      <button @click="changeMessage">Change Message</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue.js!'
        },
        beforeCreate: function() {
          console.log('beforeCreate 훅이 호출되었습니다.');
        },
        created: function() {
          console.log('created 훅이 호출되었습니다.');
        },
        beforeMount: function() {
          console.log('beforeMount 훅이 호출되었습니다.');
        },
        mounted: function() {
          console.log('mounted 훅이 호출되었습니다.');
        },
        updated: function() {
          console.log('updated 훅이 호출되었습니다.');
        },
        methods: {
          changeMessage: function() {
            // this.message = '안녕, Vue.js! (수정된 메시지)';
          }
        }
      });
    </script>
  </body>
</html>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    {{ message }}
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  updated() {
    console.log('updated 훅이 호출되었습니다.');
  },
  methods: {
    changeMessage() {
      this.message = '안녕, Vue.js!';
    }
  }
}
</script>

뷰 컴포넌트

컴포넌트 기초

컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있습니다. 따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적입니다:

이것은 기본 HTML 엘리먼트를 중첩하는 방법과 매우 유사하지만, Vue는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현합니다. Vue는 기본 웹 컴포넌트와도 잘 작동합니다. Vue 컴포넌트와 기본 웹 컴포넌트 간의 관계가 궁금하시다면 여기에서 자세히 읽어보세요.

컴포넌트 정의하기

Single File Component (SFC)

빌드 방식을 사용할 때 일반적으로 싱글 파일 컴포넌트(줄여서 SFC)라고 하는 .vue 확장자를 사용하는 전용 파일에 각 Vue 컴포넌트를 정의합니다:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">당신은 {{ count }} 번 클릭했습니다.</button>
</template>

문자열 템플릿(String template)

빌드 방식을 사용하지 않을 때, Vue 컴포넌트는 Vue 관련 옵션을 포함하는 일반 JavaScript 객체로 정의할 수 있습니다:

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      당신은 {{ count }} 번 클릭했습니다.
    </button>`
}

JavaScript 문자열로 정의한 템플릿은 Vue가 즉석에서 컴파일합니다. 엘리먼트(보통 기본 <template> 엘리먼트)를 가리키는 ID 셀렉터를 사용할 수도 있습니다. Vue는 해당 컨텐츠를 템플릿 소스로 사용합니다.

위의 예는 단일 컴포넌트를 정의하고 이를 .js 파일의 내보내기 기본 값으로 내보냅니다. 그러나 명명된 내보내기를 사용하여 한 파일에서 여러 개의 컴포넌트로 내보낼 수 있습니다.

컴포넌트의 기본구조

<template>
  <!-- HTML 템플릿 <template> 섹션에는 컴포넌트의 HTML 템플릿이 정의됩니다. --> 
</template>

<script>
  // JavaScript 로직, <script> 섹션에는 컴포넌트의 JavaScript 로직이 작성됩니다.
</script>

<style>
  /* CSS 스타일, <style> 섹션에는 컴포넌트의 CSS 스타일이 정의됩니다. */
</style>

컴포넌트 등록하기

Vue.js에서 컴포넌트 등록은 전역(Global) 컴포넌트 등록과 지역(Local) 컴포넌트 등록 두 가지 주요 방법으로 나뉩니다. 이 두 방법 간에는 중요한 차이점이 있습니다. 아래 예제 코드와 함께 설명을 보도록 합시다.

전역 컴포넌트 등록(Global Component Registration):

전역 컴포넌트 등록은 어플리케이션 내 어디서나 해당 컴포넌트를 사용할 수 있도록 하는 방법입니다. 전역으로 등록된 컴포넌트는 Vue 인스턴스를 생성하는 어디에서든 사용 가능합니다. 일반적으로 루트 Vue 인스턴스에 전역 컴포넌트를 등록하게 됩니다.

다음을 사용하여 새 Vue 인스턴스를 생성

new Vue({
  el: '#some-element',
  // 옵션
})

전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용합니다.

Vue.component('my-component', {
  // 옵션
})

전역 컴포넌트 등록의 장점은 간단하고 어플리케이션 전역에서 공통적으로 사용되는 컴포넌트를 등록하기에 편리하다는 것입니다. 그러나 이러한 컴포넌트는 어플리케이션 규모가 커질수록 네임스페이스 충돌 등의 문제가 발생할 수 있습니다.

Vue는 사용자 지정 태그 이름에 대해 [W3C 규칙](http://www.w3.org/TR/custom-elements/#concepts)을 적용하지 않습니다 (모두 소문자이어야 하고 하이픈을 포함해야합니다). 그러나 이 규칙을 따르는 것이 좋습니다.

일단 등록되면, 컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트,<my-component></my-component>로 사용할 수 있습니다. 루트 Vue 인스턴스를 인스턴스화하기 전에 컴포넌트가 등록되어 있는지 확인하십시오. 전체 예제는 다음과 같습니다.

<div id="example">
  <my-component></my-component>
</div>

// 등록
Vue.component('my-component', {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})

// 루트 인스턴스 생성
new Vue({
  el: '#example'
})

아래와 같이 렌더링 됩니다.

<div id="example">
  <div>사용자 정의 컴포넌트 입니다!</div>
</div>

지역 컴포넌트 등록(Local Component Registration):

지역 컴포넌트 등록은 특정 컴포넌트 내에서만 사용 가능한 컴포넌트를 등록하는 방법입니다. 이 컴포넌트는 해당 컴포넌트의 범위 내에서만 유효하며, 다른 컴포넌트나 Vue 인스턴스에서 직접 접근할 수 없습니다.

지역 컴포넌트 등록은 주로 부모 컴포넌트 내에서 자식 컴포넌트로 사용하거나, 특정 컴포넌트에서만 필요한 컴포넌트를 등록할 때 유용합니다. 이를 위해 컴포넌트 옵션 객체 내에서 components 속성을 사용합니다.

모든 컴포넌트를 전역으로 등록 할 필요는 없습니다. 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수있는 컴포넌트를 만들 수 있습니다:

var Child = {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 는 상위 템플릿에서만 사용할 수 있습니다.
    'my-component': Child
  }
})

지역 컴포넌트 등록의 장점은 컴포넌트 간 충돌을 방지하고, 컴포넌트의 범위를 명확하게 제어할 수 있다는 것입니다. 다른 컴포넌트에서 사용하지 않는 컴포넌트를 지역 범위에만 유지할 수 있어 코드 관리가 용이합니다.

따라서, 전역 컴포넌트 등록은 어플리케이션 수준에서 공통 컴포넌트를 사용할 때 유용하며, 지역 컴포넌트 등록은 특정 컴포넌트 범위에서만 사용해야 하는 컴포넌트를 정의할 때 유용합니다.

https://v2.ko.vuejs.org/v2/guide/components.html