[Vue 스터디 #5] Fallthrough 속성, Slot, Provide & Inject, Lifecycle hooks

Non-Prop 속성

Non-Prop 속성 (= fallthrough 속성)

• props 혹은 event에 명시적으로 선언 되지 않은 속성 혹은 이벤트를 의미
• 속성 상속
  • 컴포넌트가 단일 루트 요소 라면, 루트 요소에 자동으로 추가
    • 이때 기존 class 나 style 이 있었다면 병합됨
  • 중첩되어있다면, 그 아래 컴포넌트 까지 fallthrough 속성이 닿는다
    • 중간에서 해당 속성을 props 이나 emit 하고 있다면 comsume 되어 닿지 않는다.
• 속성 상속 비활성화
  • inheritAttrs: false
  • 속성 상속을 비활성화하는 일반적인 시나리오는 루트 노드 이외의 다른 엘리먼트에 속성을 적용해야 하는 경우
    • fallthough 속성을 제어하고자 하는 곳에서 $attrs 로 접근
      • 속성을 넘길때 ab-bar로 썼다면 $attrs[ab-bar] 그대로 접근해야함

// button 태그에 fallthrough 속성을 추가하고 싶을 경우,
// inheritAttrs 를 false 로 두고,
export default {
  inheritAttrs: false,
};

// button 에 v-bind="$attrs" 선언
<div class="btn-wrapper">
  <button class="btn" v-bind="$attrs">
    클릭하기
  </button>
</div>;

Slot

• 부모 컴포넌트에서 제공하는 콘텐츠를 나타내는 슬롯 콘텐츠
• slot 에 name을 부여하여 구분 할 수 있다.
  • 그때 부모 컴포넌트에서 v-slot 을 사용하면 해당 name의 slot에 컨텐츠를 표현 할 수 있다.
    • v-slot:이름 -> #이름
  • name을 지정하지 않을 경우 암시적으로 사용

Scoped Slots

• 슬롯 콘텐츠에서 상위 컴포넌트와 하위 컴포넌트 데이터를 모두 사용하고 싶을때
  • 자식 컴포넌트에서 요소를 사용할 때 props를 전달하는 것처럼 속성을 슬롯 콘텐츠에 전달

// 자식 컴포넌트
<template>
  <slot :x="x" :y="y"/>
</template>

// 부모 컴포넌트
<template>
<MouseTracker v-slot="{ x, y }">
      마우스 좌표: {{ x }}, {{ y }}
    </MouseTracker>
</template>

의존성 주입

• prop 드릴링을 사용하면 '인자 받고 전달 x n번'인데, 의존성 주입을 통하면 한번에 전달 가능
  • provide() : 하위 컴포넌트에 주입(Inject)할 수 있도록 값을 제공(Provide)
  • inject() : 상위 컴포넌트 또는 app.provide()를 통해 앱에서 제공(Provide)된 값을 주입(Inject)
• postMessage 의 개념과 비슷
• Symbol()는 어떨때 사용하는 건지 의문

// parent 
export default {
  name: 'ParentComponent',
  provide() {
    return {
      sharedData: 'This is shared data'
    };
  }
};

//child
export default {
  name: 'ChildComponent',
  inject: {
    sharedData: {
      from: 'sharedData',
      default: 'Default message if not provided'
    }
  },
  created() {
    console.log(this.sharedData); // "This is shared data"
  }
};

라이프 사이클 훅

• Creation(생성) → Mounting(장착) → Updating(수정) → Destruction(소멸)
• 주로 사용되는 라이프 사이클 훅
  • Creation : created
    • DOM 접근 불가능
  • Mounting : mounted
    • DOM 접근 가능

Template refs

• DOM 에 직접 접근하기 위해 사용하는 특수속성 이지만, props & emit 으로 사용하는게 더 유지보수성이 좋음