setup() 함수

Composition API 사용을 위한 진입점 역할을 한다.

라이프사이클(lifecycle)에서 컴포넌트 인스턴스가 생성되기 전에 실행된다.

반응형 API를 사용하여 반응형 상태를 선언하고 setup()에서 객체를 반환하여 <template>에 노출시킬 수 있다.

setup()의 첫 번째 매개변수는 props이고, 두 번째 매개변수는 setup context 객체이다.

예시

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

 

 

setup() 안에서 반응형 상태를 선언하고 객체로 반환하게 되면 template과 컴포넌트 인스턴스에서 사용할 수 있다.

이 때 setup() 안에서 반응형 상태를 선언했으면, 반드시 return을 해주어야 한다.

메서드 또한 반응형 상태와 마찬가지로 사용방법이 똑같다.

 

 

props

setup 함수의 첫 번째 매개변수이고, 반응형 객체이다.

props 객체를 구조 분해 할당을 하게 되면, 반응성을 잃게 된다.

따라서, props.xxx 형식으로 props에 접근하는 것이 좋다.

사용법

 

 

setup context

setup 함수에 전달된 두 번째 매개변수이고, setup context 객체이다.

context 객체는 setup 함수 내에서 유용하게 사용할 수 있는 속성을 가지고 있다.

속성의 종류에는 attrs, slots, emit, expose가 있다.

attrs

속성을 의미한다.

$attrs와 동일한 비반응형 객체이다.

 

slots

슬롯을 의미한다.

$slots에 해당하는 비반응성 객체이다.

 

emit

이벤트 발생을 의미한다.

$emit에 해당하는 함수이다.

 

expose

public한 속성이며, 함수를 외부에 노출할 때 사용한다.