[Vue3] setup()와 methods()

methods는 Vue 2에서 사용되던 옵션 중 하나로, 컴포넌트 인스턴스의 메서드를 정의하기 위해 사용됩니다. 반면에 setup은 Vue 3에서 새로 추가된 컴포넌트 옵션으로, 컴포넌트의 로직을 정의하기 위해 사용됩니다.

methods

컴포넌트에서 methods를 사용하면 해당 메서드는 컴포넌트 인스턴스에 속하게 됩니다. 즉, 해당 메서드는 this를 통해 컴포넌트 인스턴스 내부의 데이터나 다른 메서드에 접근할 수 있습니다.

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

위 코드에서 increment() 메서드는 data 옵션에 정의된 count 데이터에 접근하기 위해 this.count를 사용하고 있습니다. 이 increment() 메서드는 methods 객체에 정의되어 있기 때문에 컴포넌트 인스턴스에 속합니다.

 

setup

setup() 함수 내부에서 정의된 함수는 컴포넌트 인스턴스와 분리되어 있습니다. 즉, 해당 함수는 일반적인 자바스크립트 함수와 마찬가지로 사용됩니다. 다음은 위의 예제를 setup() 함수로 변경한 코드입니다.

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

setup() 함수 내부에서 increment() 함수는 일반적인 자바스크립트 함수와 동일한 방법으로 정의되었습니다. 그리고 increment() 함수가 사용하는 count 변수는 ref() 함수를 사용하여 반응성이 있는 데이터로 정의되었습니다. setup() 함수에서 반환된 객체에 count와 increment 함수가 포함되어 있기 때문에, 템플릿에서는 increment() 함수를 직접 호출하고 count 데이터를 사용할 수 있습니다. 이때 increment() 함수 내부에서 count 변수를 참조할 때 count.value와 같이 .value를 사용해야 합니다.

위 코드에서 increment() 함수는 컴포넌트 인스턴스의 메서드가 아니라 그 자체로 사용됩니다. increment() 함수에서 this를 사용할 필요가 없기 때문에, 이 함수를 다른 컴포넌트에서도 쉽게 재사용할 수 있습니다.

 

 

setup함수를 이용할 때 장점

Vue3에서 setup() 함수와 methods의 주요 차이점은 Vue3의 반응성 시스템과 밀접한 관련이 있다는 것입니다. setup() 함수는 Vue3 반응성 시스템과 함께 사용될 때 많은 장점을 제공합니다. 이에 대한 몇 가지 예시를 아래에 설명해보겠습니다.

1. 성능 향상
setup() 함수는 컴포넌트 인스턴스와 분리되어 있기 때문에 컴포넌트 인스턴스의 생성과 관련된 오버헤드가 줄어듭니다. 또한 setup() 함수에서 사용되는 데이터는 Vue3의 반응성 시스템을 이용하여 반응성을 유지하게 되므로 성능적인 측면에서도 이점을 제공합니다.

2. 코드 가독성 및 유지보수성 향상
setup() 함수는 컴포넌트 로직을 한 곳에서 정의할 수 있기 때문에 코드 가독성과 유지보수성을 향상시킵니다. methods와 같이 컴포넌트 내부에 메서드를 정의하는 방식은 코드의 구조가 복잡해지면 유지보수가 어려워지는 경우가 많습니다.

3. Vue3의 반응성 시스템 활용 가능
setup() 함수에서는 Vue3의 반응성 시스템을 활용하여 ref(), reactive(), computed() 등의 함수를 사용하여 반응성 있는 데이터를 쉽게 정의할 수 있습니다. 이를 통해 Vue3의 반응성 시스템을 더욱 쉽게 활용할 수 있습니다.

4. 인스턴스 메서드와의 분리
setup() 함수 내부에서 정의된 함수는 컴포넌트 인스턴스와 분리되어 있습니다. 따라서 다른 컴포넌트에서 재사용이 가능합니다.