Vue.js data () { return { } } VS data:() => ({ }), 어떤게 더 좋을까?

vue를 사용하다 보면 가장 기본적으로, 자주 쓰게 되는 Data, 처음 vue를 하시는 분들을 도와주다 보면 왜 data는 굳이 함수로 표현해야 하고, 화살표 문법과 그렇지 않은 함수형의 차이는 무엇인지에 대해 질문을 듣게 된다. 막상 설명을 하려니 뭔가 어려워서 블로그로 정리하려 한다. 굉장히 중요한 이론이지만 빠르게 작업 진도를 빼다 보면 간과할 수 있는 Data에 대해 알아보자.

 

 

---

  Data는 왜 함수형이여야 할까?  

 

vue를 이용하여 하나의 파일에서만 작업하다가 컴포넌트를 나누게 되면 한 번쯤을 볼 수 있는 경고 메세지인 [error  `data` property in component must be a function] 은 data를 함수형이 아닌 오브젝트 형태로 선언할 때 뱉어내는 오류다.

 

 

작업이 지금까지 잘 되었었는데 갑자기 오류라니? 처음에는 안 그랬으면서, 갑자기 Data는 함수형이어야 한다고? 일단 data에 대해 조금 이해를 해야 한다. vue는 하나의 인스턴스 안에서 작업을 할 때는 굳이 함수로 반환하지 않아도 된다. 공식 문서의 vue시작하기를 보면 처음에는 data에 return이 없는 것을 확인할 수 있다.

 

 

하지만 컴포넌트에서의 Data 선언은 다르다. 각각의 다른 컴포넌트마다 각자의 데이터를 관리해야 하기 때문이다. 컴포넌트마다 Data를 오브젝트로 생성하여 여러 번 사용하더라도 결국엔 JS가 작동하는 방식으로 인해 구성 요소의 모든 단일 인스턴스가이 속성을 공유하여 Data 값을 참조하기 때문에 Data 침범이 일어날 수 있다.

 

이러한 이유 때문에 컴포넌트에서는 객체 리터럴로 선언하는 것이 아니라 함수형으로 return 값을 통해 리터럴을 반환한다. return을 이용하면 각 컴포넌트마다 데이터를 분리하여 관리할 수 있게 된다.

 

 

---

 

  Function? Arrow Function? 

 

왜 함수형을 써야 하는지에 대해 이해하게 되면 다른 의문점에 도달하게 된다. 어떤 Function을 사용해야 하는 걸까? 사실 ES5 또는 ES6 표기법이라는 단순한 차이라서 취향껏 쓰면 된다. 개인적으로 ES6 문법 표기를 좋아해서 Arrow Function으로 자주 작성한다.

//ES5 문법
data () {
 return {
    데이터를 넣어주세요
  }
 }
 

//ES6 문법
data:() => ({
   데이터를 넣어주세요
})

단, Arrow Function을 사용한다면 한 가지의 주의점을 꼭 인지해야 한다.  vue에서는 Data에 보관하는 값을 this로 불러온다. Data 안에서도 this로 값의 선언이 가능한데 Arrow Function의 경우에는 this가 작동하지 않는다.

 

조금 어려운 내용이지만, 이해하면 메서드를 사용할 때의 실수도 줄어드니 한번 생각해 보자!

 

예를 들어, props를 이용한 값을 해당 데이터 값에 넣어준다고 하면, ES5 Function은 this를 인지하지만 Arrow Function의 경우에는 this를 인지하지 못한다. 왜 그런 걸까?

// 아래의 코드의 this는 값을 읽어오지 못한다.

export default {
    props: ['mygrapefruit'],
    data: () => ({
     grape: '포도',
     grapefruit: this.mygrapefruit
    })
}

 

이유는 Arrow Function의 this가 일반 this와 대상이 다르다는 것이다. 원래는 vue Instance 안에 선언된 this는 [vue Instance]를 지칭하는 것이다. 그러나 this는 함수의 선언에 따라 대상이 변경될 수 있다.

 

ES5의 Function()의 this는 선언된 함수 내부를 지칭하게 대상이 변경되어 내부에서 그 값을 찾기 시작하지만, Arrow Function의 경우에는 함수가 선언되었음에도 불구하고 vue Instance를 this로 인식한다. 그렇기 때문에 부모에게 있는 내용을 해당 인스턴스에서 찾을 수가 없어 값이 정의되지 않는 오류가 발생하는 것이다.

 

위 같은 문제를 해결하기 위해서는 ES5의 Function()을 이용하여 선언해 주는 것이 좋다. 상황에 맞게 잘 써보도록 하자! 혹시 틀린 내용이 있다면 공유 부탁드립니다 :)

// ES6 문법으로 변경하기
export default {
    props: ['mygrapefruit'],
    data(){
       return{
       	 grape: '포도',
         grapefruit: this.mygrapefruit
       }
    }
}


// ES6 이하 문법으로 변경하기
export default {
    props: ['mygrapefruit'],
    data: function(){
     return {
        grape: '포도',
        grapefruit: this.mygrapefruit
      }
   }
}

 

 

 

 

 

 

 

참고문서 : stackoverflow.com/questions/48980865/vue-js-difference-of-data-return-vs-data

Vue JS: Difference of data() { return {} } vs data:() => ({ })

참고문서 : jw910911.tistory.com/67

Vue.js - 전역 component / template / vue data / props / [강좌 2강정리]

참고문서 : medium.com/@hozacho/vuejs%EC%97%90%EC%84%9C-arrow-function%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-ec067c342412

VueJS에서 Arrow Function을 사용해야하는 이유