Vue.js data가 함수여야 하는 경우

Root Vue 인스턴스 즉, new Vue ({...})를 통해 생성 된 경우, 문제없이 data : {...} 오브젝트 형태를 사용할 수 있다. 왜냐하면 new Vue를 함으로써 새로운 인스턴스를 생성한다는 의미이기 때문이다. 그리고 이 Vue 인스턴스는 SPA라면 하나만 가질 수 있을 것이다.

 

여기서 문제는 Vue.component (...) or export default {...}를 통해 정의 된 재사용 가능한 구성 요소가 있을 때 인데

이러한 경우에는

data () {
  return {...};
}

또는 

data : function () {
  return {...};
}

을 사용해야한다.

그 이유는 재사용 가능 구성요소들은 import를 해서 한 부모 컴포넌트에서 재사용 가능한 컴포넌트를 여러개 사용하는 경우가 있다. 

이 때 컴포넌트를 불러와 사용하는 경우 각각의 인스턴스를 생성할 때 각각의 독립된 data를 가지고 있게 하기 위해서는 함수의 형태로 만들어서 return을 시켜줘야 한다. 만약 이렇게 하지 않으면 여러개의 자식 컴포넌트의 데이터들이 공유되어 버린다.

 

즉, data : { }를 사용하는 경우 동일한 데이터 개체가 하위 구성 요소간에 공유된다는 것이다.

 

글을 쓴 뒤 생각해보는것이지만, 이걸 100% 이해한 느낌이 안들어서 몇자 끄적여 보려고 한다.

(거의 혼잣말 수준이라 안 읽는걸 추천)

컴포넌트를 import해서 쓸 때에는 components에 등록한 친구들이 Vue.Comoponent의 기능으로 사용할 수 있는 컴포넌트가 되고 그러면 태그 방식(<my-component />)으로 해당 컴포넌트를 사용할 수 있다. 그 컴포넌트를 v-for나 다른 방식으로 여러번 사용한다하면 결국에는 "하나의 컴포넌트 파일을 여러번 쓰는것" 이 된다. 파일 스코프로만 생각하면 모든 html이나 javascript style 블럭들도 똑같이 공유된다. 실제로 소스파일을 살펴보면 data-v-xxxxx 라는 뷰가 style 컴포넌트를 위해 붙이는 일련번호들이 똑같은 걸 알 수 있다. 그렇게 생각하면 하나의 파일이니깐 모든 블럭들이 공유되는데 어떻게 data만 공유가 안되게 할수 있을까? (물론 data가 공유되어 버리면 컴포넌트로 만드는데 상태가 없는 컴포넌트들로만 만들어야 쓸 수 있는 컴포넌트가 될거다.) data를 공유 안시키게 하기 위해서 vue 개발팀들은 data를 함수로 만든게 아닌가? 싶다. 하나의 파일을 import해서 여러번 사용할 때 한번 사용하려고 선언하는 순간 data가 reference type인 객체로 되어 있으면 그 객체를 그대로 참조할 것이고 함수로 되어 있으면 그 함수를 실행시킴으로써 새로운 객체가 생성되어 return 되는 것이다. 여기서 아마 data 함수도 주소값을 참조해보면 똑같이 공유되어 있을꺼? 같다.