린찬승하우스

컴포넌트는 Vue 애플리케이션을 구성하는 재사용 가능한 UI 요소입니다. 컴포넌트를 사용하면 코드를 모듈화하여 유지보수성을 향상시키고 개발 효율성을 높일 수 있습니다. Vue에서 컴포넌트를 생성하고 사용하는 방법을 알아봅시다.

1. 컴포넌트 생성

Vue 컴포넌트는 Vue.component 메서드를 사용하여 생성할 수 있습니다. 컴포넌트를 정의하는 객체에는 template, data, methods, computed 등의 옵션을 포함시킬 수 있습니다.

Vue.component('my-component', {
  template: '<div>나의 컴포넌트입니다.</div>',
  data() {
    return {
      message: '안녕하세요!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

위의 코드에서 my-component는 컴포넌트의 이름이며, template 옵션은 컴포넌트의 HTML 템플릿을 정의합니다. data 옵션은 컴포넌트의 데이터를 정의하고, methods 옵션은 컴포넌트의 메서드를 정의합니다.

2. 컴포넌트 사용

컴포넌트를 사용하기 위해서는 컴포넌트를 태그처럼 사용해야 합니다. 컴포넌트를 사용하기 위해 <my-component>와 같이 태그를 작성하면 해당 컴포넌트가 렌더링됩니다.

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

위의 코드에서 <my-component> 태그를 사용하여 my-component 컴포넌트를 렌더링합니다. 컴포넌트의 내용은 컴포넌트 정의에서 지정한 template에 따라 표시됩니다.

3. 컴포넌트 통신

컴포넌트 간의 데이터 전달을 위해 부모-자식 관계를 활용할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 props를 사용해야 합니다.

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

new Vue({
  el: '#app',
  data: {
    parentMessage: '부모로부터 전달된 메시지입니다.'
  }
});

위의 코드에서 child-component는 message라는 props를 가지며, 해당 값을 템플릿에서 사용할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 v-bind 디렉티브를 사용해야 합니다.

<div id="app">
  <child-component v-bind:message="parentMessage"></child-component>
</div>

위의 코드에서 v-bind:message="parentMessage"는 parentMessage 데이터를 message 프롭스로 전달하는 예시입니다.

컴포넌트를 생성하고 사용하여 재사용 가능한 UI 요소를 만들 수 있습니다. 컴포넌트를 사용하면 코드의 가독성과 재사용성이 향상되며, Vue 애플리케이션 개발을 더욱 효율적으로 진행할 수 있습니다. 위의 내용을 기반으로 실습을 진행해보세요.

디렉티브는 Vue에서 제공하는 특수 속성으로, HTML 요소에 특정 동작을 수행하도록 지시합니다. 디렉티브를 사용하여 조건부 렌더링을 구현하면 특정 조건에 따라 요소를 동적으로 표시하거나 숨길 수 있습니다.

1. v-if 디렉티브

v-if 디렉티브를 사용하여 요소를 조건부로 렌더링할 수 있습니다. v-if에 전달된 값이 true인 경우에만 해당 요소가 렌더링됩니다.

<p v-if="isShow">이 요소는 조건이 참일 때만 보입니다.</p>

isShow는 Vue 인스턴스의 데이터로, 조건에 따라 요소의 렌더링 상태가 결정됩니다.

2. v-else 디렉티브

v-else 디렉티브를 사용하여 v-if와 함께 사용하면, 앞선 v-if의 조건이 false인 경우에만 해당 요소가 렌더링됩니다.

<p v-if="isShow">조건이 참일 때 보입니다.</p>
<p v-else>조건이 거짓일 때 보입니다.</p>

v-else는 v-if와 바로 인접해 있어야 하며, 동일한 부모 요소 내에서 사용되어야 합니다.

3. v-show 디렉티브

v-show 디렉티브를 사용하여 요소를 조건부로 표시하거나 숨길 수 있습니다. v-show에 전달된 값이 true인 경우에는 요소가 화면에 표시되고, false인 경우에는 요소가 숨겨집니다.

<p v-show="isShow">이 요소는 조건이 참일 때만 보입니다.</p>

v-show는 요소를 실제로 숨기지만, DOM 구조는 그대로 유지됩니다. 따라서 v-show를 사용하면 요소가 자주 토글될 때 유용합니다.

디렉티브를 사용하여 조건부 렌더링을 구현하면 특정 조건에 따라 동적으로 화면을 조작할 수 있습니다. 이를 통해 사용자 인터랙션에 따라 요소를 보이거나 숨길 수 있습니다. 위에서 제시한 예제를 기반으로 실제 애플리케이션에 적용해 보세요.

린찬승하우스

2023년 6월 26일 월요일

컴포넌트 생성과 사용