Vue 에서 함수가 존재할수있는 3가지 위치

 

 

많은 함수들을 setup() 안에서 정의한 상황을 상상해보자.

<!-- App.vue -->

<script>

  export default {

    setup() {

      function a() {}
      function b() {}
      function c() {}
      function d() {}
      function e() {}
      function f() {}
      function g() {}
      function h() {}

      return { a, b, c, d, e, f, g, h }

    }
    
  }

</script>

그리 좋아보이지않는다.

JavaScript 에서는 함수 또한 객체이므로, 이 함수들을 다른 객체의 요소로 집어넣은뒤,

객체를 return 하는것이 현명하다.

<!-- App.vue -->

<script>

  export default {

    setup() {

      const myFunctions = { a, b, c, d, e, f, g, h}

      function a() {}
      function b() {}
      function c() {}
      function d() {}
      function e() {}
      function f() {}
      function g() {}
      function h() {}

      return { myFunctions }

    }
    
  }

</script>

이 방식의 가장 큰 장점은, setup() 안에서 정의한 state 에 곧 바로 접근 가능하다는것이다.

위의 함수들을 export default 바깥으로 빼낼수도 있다.

<!-- App.vue -->

<script>

  export default {

    setup() {

      const myFunctions = { a, b, c, d, e, f, g, h}

      return { myFunctions }

    }
    
  }

  function a() {}
  function b() {}
  function c() {}
  function d() {}
  function e() {}
  function f() {}
  function g() {}
  function h() {}

</script>

이 방식으로 갈 경우, setup() 안에 있는 다른 변수에 접근할수없기때문에

각 함수들이 인자와 return 을 사용하는

좀 더 general 함 함수여야할것이다.

하지만 위의 함수들이 다른 .vue 파일에도 사용되면 좋을 정도로 유용한 함수들이라면?

이럴 경우 더 좋은 방법은 함수들을 아예 .js 파일로 분리하는것이다.

/* myFunctions.js */

const myFunctions = {

    a() { return 'Hello World!'},
    b() {},
    c() {},
    d() {},
    e() {},
    f() {},
    g() {},
    h() {}

}

export default myFunctions

위와 같이 함수들을 객체로 가진 .js 파일을 만들었다.

함수들이 객체안에서 바로 정의되는 경우 function 을 생략해야한다.

음 하지만..

/* myFunctions.js */

const myFunctions = {

    a, b, c, d, e, f, g, h

}

function a() { return 'Hello World!'}
function b() {}
function c() {}
function d() {}
function e() {}
function f() {}
function g() {}
function h() {}

export default myFunctions

이렇게 하는게 더 보기 좋을것이다.

 

다른 파일에서 이 .js 파일을 로딩하려면

반드시 export default 해주어야한다는것을 잊지말자.

이제 App.vue 에서 로딩하여 사용해보자!

<!-- App.vue -->

<template>
  
  {{ myFunctions.a() }}

</template>

<script>

  import myFunctions from './myFunctions.js'

  export default {

    setup() {

      return { myFunctions }

    }
    
  }

</script>

아주 잘 작동한다!

 

지금까지 본것처럼 함수를 여러 위치에 배치할수있다.

각 위치마다 존재 이유가 다르기에, 한 가지 방법이 최선이라고 할수없을것이다.

마지막으로 정리해보자.

 

1. setup() 속 : props 나 state 에 직접적인 필요한 함수들

2. export default 바깥 : 재사용이 필요하지않지만, 조금은 general 한 함수들

3. 독립된 .js 파일 : 여러 .vue 파일을 넘나들며 재사용할 함수들