vue slot & composition api

1. 슬롯이란?

슬롯은 Vue.js에서 컴포넌트의 재사용성을 높이기 위해 사용되는 기능입니다.
부모 컴포넌트에서 자식 컴포넌트로 템플릿 컨텐츠를 동적으로 삽입할 수 있게 해줍니다.
이를 통해 컴포넌트의 유연성과 재사용성이 향상됩니다.

2. 기본 슬롯 사용

기본 슬롯은 자식 컴포넌트에 <slot></slot> 태그를 사용하여 정의하고,
부모 컴포넌트에서 자식 컴포넌트 태그 내에 삽입된 컨텐츠가 슬롯 위치에 렌더링됩니다.

예시:

<!-- 자식 컴포넌트 -->
<template>
  <button class="fancy-btn">
    <slot></slot> <!-- 슬롯 아울렛 -->
  </button>
</template>

<!-- 부모 컴포넌트 -->
<FancyButton>클릭하기!</FancyButton>

3. 명명된 슬롯

하나의 컴포넌트 내에서 여러 개의 슬롯을 사용할 때, 각 슬롯에 고유 이름을 할당할 수 있습니다.
이렇게 하면 각 슬롯의 용도를 명확히 할 수 있으며, 부모 컴포넌트에서는 해당 이름을 사용하여 적절한 컨텐츠를 삽입할 수 있습니다.

예시:

<!-- 자식 컴포넌트 -->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<!-- 부모 컴포넌트 -->
<BaseLayout>
  <template v-slot:header>
    <h1>페이지 제목</h1>
  </template>
  <p>주요 내용</p>
  <template v-slot:footer>
    <p>연락처 정보</p>
  </template>
</BaseLayout>

4. 범위가 지정된 슬롯

범위가 지정된 슬롯을 사용하면 자식 컴포넌트가 슬롯을 통해 부모 컴포넌트로부터 데이터를 받아 사용할 수 있습니다.

이를 통해 컴포넌트의 유연성을 향상시킬 수 있습니다.

예시:

<!-- 자식 컴포넌트 -->
<template>
  <div>
    <slot :user="userData"></slot>
  </div>
</template>

<!-- 부모 컴포넌트 -->
<MyComponent>
  <template v-slot:default="slotProps">
    <p>{{ slotProps.user.name }}</p>
  </template>
</MyComponent>

5. 실무 적용 예제

범위가 지정된 슬롯을 이용하여 다양한 데이터를 표현하고, 사용자 정의 렌더링을 구현할 수 있는 강력한 기능을 제공합니다.

예시:

<!-- FancyList 컴포넌트 -->

<FancyList :api-url="url">
  <template #item="{ item }">
    <div class="item">
      <p>{{ item.description }}</p>
      <p>by {{ item.user }} | {{ item.likes }} likes</p>
    </div>
  </template>
</FancyList>

 

---

 

슬롯의 강력한 기능 : 대체 컨텐츠 

 

대체 컨텐츠는 Vue.js에서 슬롯의 강력한 기능 중 하나입니다. 이 기능을 통해 개발자는 컴포넌트를 더 유연하게 설계할 수 있으며,
컴포넌트의 재사용성을 높일 수 있습니다. 대체 컨텐츠의 사용은 부모 컴포넌트가 특정 슬롯에 컨텐츠를 제공하지 않을 경우를 대비하여, 컴포넌트에 기본적으로 표시할 내용을 정의할 수 있게 해줍니다.

대체 컨텐츠 사용 예제 설명

1. 기본 슬롯 사용: <slot></slot> 태그 사이에 대체 컨텐츠를 넣어 슬롯에 컨텐츠가 제공되지 않을 때 사용됩니다.
2. 대체 컨텐츠 정의: 슬롯 태그 내에 원하는 기본 텍스트나 HTML을 배치함으로써, 부모 컴포넌트가 해당 슬롯에 아무런 컨텐츠도 제공하지 않을 때 이를 렌더링합니다.
3. 부모 컴포넌트의 슬롯 사용: 부모 컴포넌트에서 자식 컴포넌트의 슬롯을 사용할 때, 슬롯에 컨텐츠를 전달하지 않으면 자동으로 대체 컨텐츠가 표시됩니다.
4. 컨텐츠 제공 시의 동작: 부모 컴포넌트가 슬롯에 컨텐츠를 제공하는 경우, 대체 컨텐츠는 무시되고 부모 컴포넌트에서 제공된 컨텐츠가 렌더링됩니다.

구체적인 코드 예시

자식 컴포넌트 (SubmitButton.vue)

<template>
  <button type="submit">
    <slot>
      제출 <!-- 이것은 대체 컨텐츠입니다 -->
    </slot>
  </button>
</template>

부모 컴포넌트에서의 사용

• 대체 컨텐츠 사용: 컨텐츠를 제공하지 않는 경우, '제출'이 기본값으로 버튼에 표시됩니다.
• <SubmitButton />
• 컨텐츠 제공: '저장'이라는 텍스트를 슬롯을 통해 전달하면, '제출' 대신 '저장'이 버튼에 표시됩니다.
• <SubmitButton>저장</SubmitButton>

활용 시나리오

대체 컨텐츠를 활용하면 컴포넌트의 범용성을 높일 수 있습니다. 예를 들어, 버튼, 입력 필드, 경고창 등 다양한 UI 컴포넌트에서 기본 텍스트나 설정을 정의할 때 유용합니다. 이를 통해 같은 컴포넌트를 다양한 상황에서 재사용할 수 있으며, 코드의 중복을 줄이고 유지 관리를 용이하게 할 수 있습니다.

---

 

Vue.js의 Composition API는 Vue 3에서 소개된 새로운 기능으로, 기존의 Options API보다 더 유연하고 확장성 있는 코드 구성을 가능하게 합니다. 이 API는 함수형 프로그래밍의 접근 방식을 채택하여 재사용성과 테스트 용이성을 향상시키며, 대규모 애플리케이션의 관리를 용이하게 합니다. 여기에 Composition API의 주요 개념과 장점, 그리고 간단한 예제를 포함한 정리 자료를 제공합니다.

Composition API 소개

기본 개념

• Reactive References (ref): 데이터를 반응형 객체로 만듭니다. 기본적인 타입(String, Number, Boolean 등)을 반응형 데이터로 만들 때 사용합니다.
• Reactive State (reactive): 복잡한 데이터 타입(객체, 배열 등)을 반응형으로 만듭니다.
• Computed Properties (computed): 계산된 속성을 정의할 수 있습니다. 데이터의 변경을 자동으로 감지하고 연산 결과를 반환합니다.
• Watchers (watch): 특정 데이터의 변경을 감시하고, 변경 시 특정 작업을 수행할 수 있습니다.

장점

1. 코드의 재사용과 조직화: 관련된 기능을 같은 블록 내에서 정의할 수 있어, 코드의 관리가 용이해집니다.
2. 타입스크립트와의 호환성: Composition API는 타입스크립트와의 호환성이 높아, 타입 추론과 정적 타이핑의 이점을 누릴 수 있습니다.
3. 확장성: 대규모 애플리케이션을 개발할 때 필요한 구조적인 유연성을 제공합니다.

사용 예제

다음은 간단한 카운터 애플리케이션을 구현한 예제입니다.

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  }
});
</script>

 

 

---

Vue.js의 Composition API는 Options API에 대한 대안으로, 코드의 재사용성과 조직을 개선하고, 더 큰 유연성을 제공합니다. Composition API에서 computed와 watch는 중요한 반응형 기능을 제공하여 애플리케이션의 데이터 흐름을 효율적으로 관리할 수 있게 돕습니다. 이들의 연관성과 사용법에 대해 아래에 자세히 설명하겠습니다.

Computed Properties (computed)

computed 속성은 데이터를 기반으로 한 계산을 수행하는 반응형 getter로서, 의존하는 반응형 상태가 변경될 때마다 자동으로 재계산됩니다. Composition API에서 computed를 사용하면 계산 로직을 캡슐화하고, 코드의 가독성을 높이며, 효율적인 데이터 처리를 보장할 수 있습니다.

사용 예제

import { ref, computed } from 'vue';

export default {
  setup() {
    const basePrice = ref(100);
    const taxRate = ref(0.05);
    const totalPrice = computed(() => basePrice.value * (1 + taxRate.value));

    return { basePrice, taxRate, totalPrice };
  }
}

위 예제에서 totalPrice는 basePrice와 taxRate의 값에 반응하여 자동으로 업데이트됩니다. 사용자가 basePrice나 taxRate를 변경하면 totalPrice는 새로 계산된 값을 반영합니다.

Watchers (watch)

watch는 지정된 소스의 변경을 감지하고, 해당 변경에 반응하여 사이드 이펙트를 실행하는 함수입니다. 데이터 변화에 따른 비동기 요청, 복잡한 조건부 로직 실행, 또는 성능에 민감한 작업에 주로 사용됩니다.

사용 예제

import { ref, watch } from 'vue';

export default {
  setup() {
    const counter = ref(0);

    watch(counter, (newValue, oldValue) => {
      console.log(`Counter changed from ${oldValue} to ${newValue}`);
    });

    return { counter };
  }
}

이 예제에서는 counter 값이 변경될 때마다 콘솔에 그 변경 사항을 로그로 출력합니다. watch는 특히 데이터 변화를 트리거로 외부 API 호출을 관리할 때 유용합니다.

연관성

computed와 watch는 모두 Vue.js의 반응성 시스템의 핵심 요소입니다. computed는 주로 데이터 변화에 따라 자동으로 업데이트되는 연산된 값에 사용되며, watch는 데이터 변화에 반응하여 명시적으로 실행할 사이드 이펙트나 비동기 연산을 관리하는 데 사용됩니다. computed는 주로 데이터 변화에 따라 업데이트되어야 할 값에 대해 정의하고, watch는 그 데이터 변화를 감지하고 추가적인 행동을 취할 때 사용됩니다.

결론

computed와 watch는 Vue의 반응형 시스템을 사용하여 애플리케이션의 데이터 흐름을 효율적으로 관리할 수 있도록 도와줍니다. Composition API는 이러한 기능을 더욱 유연하게 사용할 수 있도록 하여, Vue 애플리케이션의 개발 및 유지보수를 용이하게 합니다.

 

---

반응형 getter(Reactive Getter)는 Vue.js에서 사용되는 용어로, 주로 computed 속성과 관련 있습니다. 반응형 getter는 의존하는 데이터(reactive data)가 변경될 때 자동으로 다시 계산되는 함수입니다. 이 기능은 Vue의 반응형 시스템의 핵심 부분 중 하나로, 애플리케이션의 상태 변경에 따라 자동으로 업데이트되어야 하는 값들을 관리하는 데 매우 유용합니다.

반응형 시스템의 작동 원리

Vue의 반응형 시스템은 데이터의 변경을 감지하고 그에 따라 뷰를 업데이트합니다. computed 속성 내에서 정의된 함수는 그 자체로 반응형 getter가 됩니다. 이 함수는 하나 이상의 반응형 데이터 소스에 의존하며, 이 데이터 소스 중 하나라도 변경되면 자동으로 다시 계산됩니다.

반응형 getter의 특징

1. 캐싱: 반응형 getter는 그 결과를 캐시합니다. 의존하는 데이터에 변경이 없다면, 여러 번 접근해도 함수를 다시 실행하지 않고 캐시된 결과를 반환합니다. 이는 계산 비용이 높은 작업에서 성능을 향상시킬 수 있습니다.
2. 자동 추적: Vue의 반응형 시스템은 computed 함수가 의존하고 있는 모든 반응형 데이터를 자동으로 추적합니다. 이 데이터 중 하나라도 변경되면, 시스템은 자동으로 함수를 다시 실행하여 최신 값을 계산합니다.
3. 선언적 로직: 반응형 getter를 사용하면 데이터의 변화에 따른 결과를 선언적으로 정의할 수 있습니다. 이는 코드를 읽고 이해하기 쉬워지며, 버그 발생 가능성을 줄여줍니다.

예시

<template>
  <div>
    Total Price: {{ totalPrice }}
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const basePrice = ref(100);
    const taxRate = ref(0.05);
    const totalPrice = computed(() => {
      return basePrice.value + basePrice.value * taxRate.value;
    });

    return { totalPrice };
  }
}
</script>

 

 

위 예시에서 totalPrice는 basePrice와 taxRate의 값에 의존하는 반응형 getter입니다.

basePrice나 taxRate가 변경되면 totalPrice도 자동으로 다시 계산됩니다.

반응형 getter는 Vue 애플리케이션에서 데이터 로직과 UI의 동기화를 간단하고 효과적으로 관리할 수 있도록 도와줍니다.

이를 통해 개발자는 데이터의 흐름을 명확하게 파악하고, 유지보수가 용이한 코드를 작성할 수 있습니다.