[Vue] Function statements require a function name

 

 

Vue 3.0 Composition API 오류: 함수 이름 누락

Vue 3.0에서 Composition API를 사용할 때, 가장 흔한 오류 중 하나는 "함수 이름 누락"입니다. 이 오류는 Vue 컴포넌트의 setup() 함수에서 함수를 선언할 때 함수 이름을 누락하여 발생하는 구문 오류(SyntaxError)입니다.

 

오류 내용

Uncaught SyntaxError: Function statements require a function name

 

발생 원인

Composition API의 setup() 함수에서 함수를 선언할 때, 함수 이름을 지정하지 않은 경우에 발생합니다. 예를 들어, 아래와 같이 함수를 선언할 때 function 키워드 뒤에 함수 이름을 지정하지 않으면 오류가 발생합니다.

 

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 함수 이름이 누락되어 오류 발생
    function () {
      count.value++;
    }

    return {
      count,
      increment // 함수 이름이 누락되었기 때문에 오류 발생
    };
  }
};

 

 

해결책

이 오류를 해결하려면 함수 이름을 반드시 지정해야 합니다. function 키워드 뒤에 함수 이름을 지정하여 함수를 선언하면 됩니다.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 함수 이름을 지정하여 오류를 해결
    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

 

결론

Vue 3.0 Composition API에서 함수 이름 누락 오류는 setup() 함수 내에서 함수를 선언할 때 함수 이름을 반드시 지정해야 함을 기억해야 합니다. 이 오류를 해결하여 Composition API를 올바르게 사용하면 강력하고 유연한 Vue 컴포넌트를 개발할 수 있습니다.