반응형데이터

🧄 반응형데이터 특징

1. 반응형 데이터를 정의 할 때는 미리 data 옵션에 선언하지않으면 나중에 추가되는 데이터는 반응성을 가지지 않는다.
2. 기본적으로 만든 data가 가진 옵션은 vm.key와 vm.$data.key에 존재한다.
3. 원래는 vm.$data.key에 값이 선언이 되지만 this를 통해서 접근 할 수 있도록 vm.key도 할 수 있게 만들었다.
   (값이 변경되면 둘다 서로간의 연결로 영향을 받는다.)

<div id="app">
  <h1>{{count}}</h1>
  <h2>{{double}}</h2>
</div>
</body>
<script>
  const App = {
    data() {
      return {
        count: 0
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

만들어진 vm의 경우 data옵션을 받는 count는
vm.count에도 존재하고 , vm.$data.count에도 존재한다.
즉,반응형 데이터 특징 2,3번이 성립한다.

직접 $data.double과 double의 값을 바꾸어도 <h2>에 저장한 double이 적용되지 않는 것을 보면 반응형 데이터 특징 1번이 성립한다.
즉, 등록되지않는 것은 vm.$data.double과 vm.double간의 결합이 존재하지도 않아서라고 생각도 든다.
(실제로 vm.double=100을 하고 vm.$data.double을 관찰하면 존재하지않는다. )

불변성

🧄 데이터를 객체가 아닌 함수로 반환해야하는 이유

간단한 예시

가장 간단한 예시를 들어보자

const obj1 = {
  data : {
    count : 0
  }
}

const obj2 = {
  data() {
    return {
      count : 0
    }
  }
}

function P(data){
  this.change = ()=>{
    data.count += 10;
  }
  this.ret = () => {
    return data.count;
  }
}

let A = new P(obj1.data)
let B = new P(obj1.data)
let C = new P(obj2.data())
let D = new P(obj2.data())

A.change()
console.log(A.ret())	//10
console.log(B.ret())	//10
// A에 영향을 받아 B가 변경

C.change()
console.log(C.ret())	//10
console.log(D.ret())	//0
// C에 영향을 받지않아 D는 변경X

• 결과는 이와 같다.

즉, 객체를 통해 매개변수로 전달한 대상은 해당 값이 변경되면 이와 연관된 값 또한 변하게 되는 call by reference에 영향을 받는다.

이를 서로간의 연관을 없애기 위해서 해당 return 값으로 객체를 매개변수에 넣으면 값이 변해도 다른 값에 영향을 주지 않는다.

매개변수를 객체가 아닌 값으로 받는다면?

function P({count}){
  this.change = ()=>{
    count += 10;
  }
  this.ret = () => {
    return count;
  }
}

P함수가 이와같이 변경된다면 값을 받은것이니 call by value로
서로간의 영향없이 아래와 같이 출력될 것이다.

110
100
110
100

this.count를 사용한다면?

function P(data){
  this.count = data.count;
  this.change = ()=>{
    this.count += 10;
  }
  this.ret = () => {
    return this.count;
  }
}

P함수가 이와같이 변경된다면 data.count라는 value값을 사용하므로 서로간의 영향없이 위와 같다.

🧄 new Proxy

객체와 리턴한 함수 차이

const App1 = {
    data :  {
        count: 0
    }
  }
  const proxyA = new Proxy(App1.data,{
    get(target, key){
      return target[key]
    },
    set(target, key, value){
      target[key] = value * 2
    }
  })

  const proxyB = new Proxy(App1.data,{
    get(target, key){
      return target[key]
    },
    set(target, key, value){
      target[key] = value * 2
    }
  })


  const App2 = {
    data()  {
      return {count : 0}
    }
  }
  const proxyC = new Proxy(App2.data(),{
    get(target, key){
      return target[key]
    },
    set(target, key, value){
      target[key] = value * 2
    }
  })

  const proxyD = new Proxy(App2.data(),{
    get(target, key){
      return target[key]
    },
    set(target, key, value){
      target[key] = value * 2
    }
  })

객체를 직접 매개변수로 주었던 proxyA,proxyB는 서로 영향을 받아 값이 변경되었고
return한 객체를 매개변수로 주었던 proxyC,proxyD는 서로 영향을 받지않아 값이 변경되지않았다.

🧄 Vue

  const App = {
    data() {
      return {
        counter: 0
      }
    }
  }

  const vm1 = Vue.createApp(App).mount('#app')
  const vm2 = Vue.createApp(App).mount('#btn')

proxy와 유사한 Vue에서는 해당 App 컴포넌트를 재활용하기위해 재사용할때 서로간의 영향으로 오류가 나는 것을 막기 위해서
이와같이 return으로 객체를 받아주는 것을 알 수 있다.

정리

우리는 어떠한 값을 받을 때 그 값이 원시형인지 참조형인지에 따라
해당 값(원시형/참조형)을 변경하였을 때
이것을 다른 곳에서도 사용한 곳에서 영향을 받는다면 참조형
다른 곳에서 영향을 받지 않는다면 원시형으로 볼 수 있다.

이때 참조형을 쓰긴하되 서로간의 영향을 주고싶지 않게 만들려면
직접 쓰는것이 아닌 함수를 통해 리턴한 상태의 참조형을 반환해서 사용해야한다.
app.data (X) -> app.data()

즉, vue에서는 참조형데이터를 사용하되 컴포넌트간 재사용에 있어서 해당 값들의 독립성을 보장하기 위해 리턴한 상태의 참조형을 반환을 이용한다.