Setup

setup() 함수(hook)는 Composition API 사용을 위한 진입점 역할을 한다.
setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행된다.

기본 사용

1. 반응형 API(Reactivity API)를 사용하여 반응형 상태를 선언하고
2. setup()에서 객체를 반환하여
3. template에 노출

Props 접근

setup 함수의 첫 번째 매개변수는 props
props는 반응형 객체입니다.
props 객체를 구조 분해 할당을 하면 반응성을 잃게 되므로 항상 props.xxx 형식으로 props에 액세스하는 것이 좋다.

toRef, toRefs

만약 props의 반응성을 유지하면서 구조 분해 할당을 해야 한다면(예: 외부 함수에 prop을 전달해야 하는 경우) toRefs() 및 toRef() 유틸리티 API를 사용하여 이를 수행할 수 있다.

Setup Context

setup 함수에 전달된 두 번째 매개변수는 Setup Context 객체다.
컨텍스트 객체는 setup 함수내에서 유용하게 사용할 수 있는 속성을 갖고 있다.

export default {
  setup(props, context) {
    // 속성($attrs와 동일한 비반응형 객체)
    console.log(context.attrs)

    // 슬롯($slots에 해당하는 비반응성 개체)
    console.log(context.slots)

    // 이벤트 발생($emit에 해당하는 함수)
    console.log(context.emit)

    // Public한 속성, 함수를 외부에 노출시에 사용
    console.log(context.expose)
  }
}

컨텍스트 객체는 반응형이 아니며 안전하게 구조 분해 할당을 할 수 있다.

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs, slots

attrs와 slots은 컴포넌트 자체가 업데이트될 때 항상 업데이트되는 상태 저장 객체다.

이러한 것들은 구조 분해 할당을 피해야 하며 항상 속성을 attrs.x 또는 slot.x로 접근해야 한다.
또한 props와 달리 attrs과 slots의 속성은 반응형이지 않다.
attrs 또는 slots 변경에 따라 다른 작업을 하려고 하는 경우 onBeforeUpdate 라이프사이클 훅 내에서 수행할 수 있다.

expose

expose는 template refs(템플릿 참조)를 통해 상위 컴포넌트에서 컴포넌트의 인스턴스에 접근할 때 노출되는 속성을 명시적으로 제한하는 데 사용할 수 있는 함수입니다.