슬롯 (Slot)을 이용한 컴포넌트 커스터마이징

 슬롯은 Vue에서 컴포넌트의 일부를 커스터마이징하는 강력한 기능입니다. 슬롯을 사용하면 컴포넌트의 특정 영역에 사용자 정의 내용을 삽입할 수 있으므로, 재사용성과 유연성을 높일 수 있습니다. Vue에서 슬롯을 이용한 컴포넌트 커스터마이징 방법을 알아봅시다.

1. 기본 슬롯

기본 슬롯은 컴포넌트의 특정 영역에 사용자가 정의한 내용을 삽입할 수 있는 기능입니다. 컴포넌트의 템플릿에 <slot></slot>을 작성하여 슬롯을 정의합니다.

// 자식 컴포넌트
Vue.component('child-component', {
  template: `
    <div>
      <h2>커스터마이즈 가능한 제목</h2>
      <slot></slot>
    </div>
  `
});

위의 코드에서 <slot></slot>은 기본 슬롯을 정의한 것입니다. 사용자가 컴포넌트를 사용할 때, 해당 영역에 내용을 삽입할 수 있습니다.

<div id="app">
  <child-component>
    <p>커스터마이즈 가능한 내용입니다.</p>
  </child-component>
</div>

부모 컴포넌트에서 <child-component> 태그로 자식 컴포넌트를 사용하고, <p> 태그를 통해 내용을 작성하여 기본 슬롯에 삽입할 수 있습니다.

2. 이름 있는 슬롯

이름 있는 슬롯은 여러 개의 슬롯을 사용하고 싶을 때 사용합니다. 컴포넌트의 템플릿에서 <slot name="slotName"></slot> 형식으로 이름 있는 슬롯을 정의하고, 부모 컴포넌트에서는 v-slot 디렉티브를 사용하여 특정 슬롯에 내용을 할당합니다.

// 자식 컴포넌트
Vue.component('child-component', {
  template: `
    <div>
      <h2>이름 있는 슬롯</h2>
      <slot name="content"></slot>
      <slot name="footer"></slot>
    </div>
  `
});

위의 코드에서 <slot name="content"></slot>와 <slot name="footer"></slot>는 이름 있는 슬롯을 정의한 것입니다.

<div id="app">
  <child-component>
    <template v-slot:content>
      <p>컨텐츠 영역에 들어갈 내용입니다.</p>
    </template>
    <template v-slot:footer>
      <p>푸터 영역에 들어갈 내용입니다.</p>
    </template>
  </child-component>
</div>

부모 컴포넌트에서 <template> 태그를 사용하여 v-slot 디렉티브를 통해 특정 슬롯에 내용을 할당할 수 있습니다.

슬롯을 사용하면 컴포넌트의 일부를 유연하게 커스터마이징할 수 있습니다. 기본 슬롯과 이름 있는 슬롯을 활용하여 컴포넌트의 내용을 동적으로 변경하고, 재사용 가능한 컴포넌트를 작성할 수 있습니다. 위의 내용을 참고하여 실습을 진행해보세요.

컴포넌트 통신 방법 (Props와 이벤트)

 컴포넌트는 독립적으로 작동하면서도 다른 컴포넌트와 데이터를 주고받을 수 있어야 합니다. Vue에서는 Props와 이벤트를 사용하여 컴포넌트 간의 효과적인 통신을 구현할 수 있습니다.

1. Props를 사용한 데이터 전달

Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하기 위해 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 props 옵션을 정의하고, 자식 컴포넌트에서는 전달받은 데이터를 사용할 수 있습니다.

// 부모 컴포넌트
new Vue({
  data() {
    return {
      message: '안녕하세요!'
    };
  }
});

// 자식 컴포넌트
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

자식 컴포넌트의 props에 전달받을 데이터의 이름을 선언하고, 해당 값을 템플릿에서 사용할 수 있습니다.

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

부모 컴포넌트에서 v-bind를 사용하여 자식 컴포넌트의 props에 데이터를 전달합니다.

2. 이벤트를 사용한 부모-자식 컴포넌트 간의 통신

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 이벤트를 사용할 수 있습니다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트는 이벤트 리스너를 통해 데이터를 처리할 수 있습니다.

// 자식 컴포넌트
Vue.component('child-component', {
  template: '<button v-on:click="sendMessage">메시지 전송</button>',
  methods: {
    sendMessage() {
      this.$emit('message-sent', '안녕하세요!');
    }
  }
});

// 부모 컴포넌트
new Vue({
  methods: {
    handleMessage(message) {
      alert('받은 메시지: ' + message);
    }
  }
});

자식 컴포넌트에서 $emit 메서드를 사용하여 이벤트를 발생시키고, 부모 컴포넌트에서는 이벤트 리스너를 정의하여 데이터를 처리합니다.

<div id="app">
  <child-component v-on:message-sent="handleMessage"></child-component>
</div>

부모 컴포넌트에서 v-on 디렉티브를 사용하여 자식 컴포넌트에서 발생한 이벤트를 감지하고, 지정한 메서드를 실행합니다.

Props와 이벤트를 통해 부모-자식 컴포넌트 간의 데이터 전달과 통신을 구현할 수 있습니다. 이를 활용하여 컴포넌트 간의 유연하고 효과적인 상호작용을 구현할 수 있습니다. 위의 내용을 참고하여 실습을 진행해보세요.