[VueJS] Vue2 watch를 통해 중첩 데이터 감지하고 변경된 데이터 확인하기

오늘은 Vue를 개발할 때 자주 이용하셨던 watch에 대해서 알아보도록 합니다. vue에서 watch는 특정 데이터의 변화를 감지하여 특정 로직을 동작하게 할 때 주로 사용합니다. 성능을 위해서 자주 사용하는 건 권장드리지 않지만 꼭 사용해야될 상황이 있습니다. 오늘은 이러한 watch를 이용해 중첩 데이터를 감지하고 그 이상으로 변경된 데이터를 알 수 있는 방법을 알려드리도록 하겠습니다.

 

1. 기본 문법

  watch: {
    //감지할데이터 : function(바뀐값,바뀌기전 값)
    obj: function (val, oldVal) {
      //로직
    }
  }

기본적인 문법은 위와 같습니다. watch 내부에 감지할 데이터를 넣고 바뀐값과 바뀌기 전 값을 알고 있습니다. 하지만 이러한 구조에서는 중첩데이터를 감지할 수 없습니다. 중첩데이터를 감지하기 위해서는 아래와 같은 문법을 이용하여야 됩니다.

 

2. 중첩데이터 감지하기 위한 옵션

  watch: {
    //감지할데이터 
    obj: {
      //handler: function(바뀐값,바뀌기전 값)
      handler: function (val, oldVal) {

      },
      //중첩된 데이터 감지 필요시 :true
      deep: true
    }
  }

위와 같이 obj라는 감지할 데이터를 정의하고 내부에 핸들러와 옵션인 deep를 설정하여 중첩된 데이터 까지 감지가 됩니다. 이렇게 하면 val와 oldVal의 변화를 감지할 수 있어 보이지만, 그렇지 않습니다. 실제로 테스트 해보시면 val과 oldVal는 같은 데이터를 리턴하는 것을 볼 수 있습니다. 우리는 이러한 변화를 정확히 파악하기 위해 다음과 같은 작업을 해야됩니다.

 

3. 중첩 데이터 변화부분 찾기

<script>
export default {
  name: 'test',
  data: () => ({
    obj:{obj:{arr:[[],[]]}},
    oldObj : null
  }),
  watch: {
    //감지할데이터 
    obj: {
      //handler: function(바뀐값,바뀌기전 값)
      handler: function (val, oldVal) {
        const self = this;

        //oldObj obj 비교하여 바뀐 부분을 체크 하고 해당 바뀐 경우에 대해 동작할 로직  


        self.setObj();
      },
      //중첩된 데이터 감지 필요시 :true
      deep: true
    }
  },
  mounted(){
    const self =this;
    self.setObj();
  },
  methods:{
    setObj: function(){
      const self = this;
      self.oldObj = JSON.parse(JSON.stringify(self.obj))
    }
  }
}
</script>

위와 같이 setObj를 만들어서 mounted시점에 obj를 oldObj에 깊은복사를 하여 넣고(lodash의 cloneDeep 등을 사용), 그 후 watch를 통해 감지하여 oldObj와 obj를 비교 합니다. 그 후, 비교 하고 바뀐 부분에 대한 소스를 동작시키고 이후 다시 바뀐 데이터를 oldObj에 옮겨 담으면 이러한 중첩된 데이터를 감지하여 특정데이터의 변경에 맞는 동작을 수행하게 할 수 있습니다.

 

이렇게 watch를 활용하여 중첩된 데이터의 내용을 감지하고 변경된 부분을 체크할 수 있습니다. vue를 완전 처음 보는 분이라면 vue공식 문서를 통해 watch에 대해서 한번 보시고 보시면 좀 더 잘 이해가 될 것이라고 생각합니다. 기본적인것은 공식문서가 가장 잘 되있기 때문에 해당 부분에 대해서 공부하시고 보면 좀 더 잘 이해될 것이라고 생각됩니다.