VueJS 3 ) setup() 함수의 2 가지 인자 props, context

setup() 함수의 인자

setup 함수는 props, context 두 가지 인자를 가집니다.

---

props

setup 내부의 props 는 반응성이 있고, 새로운 props 가 전달되면 업데이트 됩니다.

props 는 다음과 같이 사용할 수 있습니다.

export default {
  props: {
    name: String,
    age : Number,
  },

  setup(props){
    console.log(props.name);
  }
}

props 는 반응성을 가지고 있지만 ES6의 구조분해할당을 사용하면 props 의 반응성이 사라지기 때문에 setup 함수의 toRefs 를 사용해 반응성을 유지해야합니다.

import { toRefs } from 'vue'
export default{
  setup(props) {
      const { name } = toRefs(props)

      console.log(name.value)
  }
}

---

context

context 는 attrs, slots, emit 3 가지의 컴포넌트 프로퍼티를 가집니다.

export default {
  setup(context) {
    console.log("attrs = "+context.attrs);
    console.log("slots = "+context.slots);
    console.log("emit = "+context.emit);
  }
}

context 객체는 일반적인 JS 객체이기 때문에 반응성이 존재하지 않습니다. 그렇기에 ES6 구조분해할당을 바로 사용할 수 있습니다.

export default {
    setup({attrs, slots, emit}) {
      console.log("attrs = "+attrs);
      console.log("slots = "+slots);
      console.log("emit = "+emit);
    }
}

attrs 와 slots 컴포넌트 자체가 업데이트 될 때, 항상 업데이트 되는 상태 저장 객체입니다. 대문에 attrs와 slots 에 구조분해할당을 피하고 속성을 attrs.value , slots.value 의 형태로 참조해야 합니다.
또한, attrs 나 slots 의 변경으로 인한 사이드이펙트를 의도하려면, onUpdated 라이프사이클 훅 안에서 수행해야 합니다.

---

참고문서 : Vue3 공식문서