[Vue] 함수형 data

 

✅ 함수형 data 사용하기

 

error `data` property in component must be a function

 

vue를 이용하여 컴포넌트를 나누게 되면 한 번쯤 볼 수있는 경고메세지.

data를 함수형이 아닌 오브젝트 형태로 선언할 때 뱉어내는 오류이다.

 

vue 공식문서에 vue 시작하기를 보면 data에 return이 없는 것을 확인할 수 있다.

vue는 하나의 인스턴스 안에서 작업을 할 때는 굳이 함수로 반환하지 않아도 된다.

vuejs 공식문서

 

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

 

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

 

 

✅ arrow function

// ES5 문법
data() {
	return {
    	name: 'kim'
    }
}

// ES6 문법
data: () => ({
	name: 'kim'
})

이처럼 두 방법으로 data를 작성할 수 있다.

단, Arrow Function을 사용한다면 한가지의 주의점을 꼭 인지해야 한다.

 

vue에서는 data에 보관하는 값을 this로 불러온다. data 안에서도 this로 값의 선언이 가능한데 Arrow Function의 경우 this가 작동하지 않는다.

 

 

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

 

// this 값을 읽어오지 못하는 경우
export default {
	props: ['myFavoriteColor'],
    data() => ({
    	color: 'blue',
        favorite: this.myFavoriteColor
    })
}

 

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

 

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

 

위의 문제를 해결하기 위해서는 es5 function()을 이용하여 data를 선언해주는 것이 좋다.

 

 

📌 참고자료

 

https://stackoverflow.com/questions/48980865/vue-js-difference-of-data-return-vs-data