setup 함수는 Composition API 사용을 위한 진입점 역할을 합니다. Lifecycle Hook에 대해 공부할 때 정확한 호출 시점을 다시 공부하도록 하겠습니다. 우선, 인스턴스가 생성되기 전에 실행된다고 알고 넘어가도록 하겠습니다.
매개변수
props
setup 함수의 첫 번째 매개변수는 props입니다. props는 반응형 객체인데, props 객체를 구조 분해 할당을 하면 반응성을 잃게 됩니다. 따라서 반응성을 유지하고자 한다면 props.xxx 형식으로 props에 액세스해야 합니다.
왜 반응성을 잃는 것일까?
props는 기본적으로 얕은 반응성(shallow reactive)을 가집니다. 얕은 반응성은 객체의 속성에 대한 직접적인 변경은 감지하지만, 객체 자체를 구조 분해하거나 속성을 추출할 때는 반응성을 유지하지 않는 것을 의미합니다.
props에 대한 반응성 추적은 동작하지만, 구조 분해 할당으로 내부 데이터 일부만 추출하면, props에 대한 속성 변경으로 추적되지 않는다는 의미입니다.
구조 분해 할당이 꼭 하고 싶다면?
만약 props의 반응성을 유지하면서 구조 분해 할당을 해야 한다면 toRefs() 및 toRef() 유틸리티 api를 사용하여 이를 수행할 수 있습니다.
toRefs()나 toRef()에 대해서는 추후에 정리하겠습니다.
context
setup 함수는 두 번째 매개변수로는 context를 받습니다. context는 setup 함수 내에서 유용하게 사용할 수 있는 속성을 가지고 있습니다.
- context.attrs
- context.slots
- context.emit
- context.expose
각각에 대해서는 공부해야할 내용이 많으니 나중에 정리하도록 하겠습니다.
