컴포넌트와 렌더리스

• 컴포넌트는 props를 이용해 틀에 있는 데이터를 바꾸는 느낌?
• 렌더리스는 더 큰 틀을 만들어두고 그 내부를 마음대로 꾸미는 느낌?
• 사실 아직까지 큰 차이를 모르겠습니다ㅎㅎㅎ
• 렌더리스를 사용하여 부모 컴포넌트에서 원하는대로 내부 구조를 디자인할 수 있다.

slot을 이용한 렌더리스 컴포넌트 적용

// Book.vue

<template>
  <div class="book">
    <slot name="title" :bookTitle="bookTitle"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bookTitle: 'Child Providing Data'
    }
  }
}
</script>

• slot을 사용한 부분을 부모 컴포넌트에서 마음대로 디자인 가능
• name을 이용해 slot을 구분
• bookTitle이라는 이름으로 데이터를 부모 컴포넌트로 넘겨줄 수 있음(props 느낌)

template으로 부모 컴포넌트에서 디자인

// Library.vue

<template>
  <Book>
    <template v-slot:title="slotProps">
      {{ slotProps.bookTitle }}
    </template>
  </Book>
</template>

• template로 원하는 slot 지정 가능
• v-slot에 디자인을 원하는 slot name 지정
• 해당 slot에서 넘겨주는 데이터가 있다면 slotProps를 이용해 받아오기
• slotProps.bookTitle로 데이터 사용

props의 구조분해 할당과 v-slot을 #으로 축약

<template>
  <Book>
    <template #title="{bookTitle}">
      {{ bookTitle }}
    </template>
  </Book>
</template>

• #으로 name을 지정해주는 v-slot 축약
• 중괄호를 이용해 slotProps를 구조분해 할당

참고 사이트

• https://itchallenger.tistory.com/833