[Vue] 배열 데이터가 Rerendering 안되는 현상

vue에서 배열 데이터에 특정 인덱스에 값을 넣었는데도 리렌더링이 안되서 값의 변경을 감지 못해서 데이터가 그대로 남아있는 경우일 때 해당 현상에 대해서 원인과 해결방법을 살펴보겠습니다.

data() {
    return {
        steps: [
            {name: 'step1', number:1}, {name: 'step2', number:2}, {name: 'step3', number:3}
        ],
    }
}

이렇게 steps 객체 배열이 있다고 가정하고 해당 스텝의 특정 인덱스에 원하는 객체 배열을 넣으려고 했습니다.

 

다른 컴포넌트에서 stepData를 받아왔다고 가정해서 editStep의 인자에는 스텝데이터로 {name: 'step2', number:222}를 index에는 2를 받아왔다고 가정해보겠습니다!

methods: {
    editStep(stepData, index) {
      this.formData.steps[index] = editStepData;
    },
}

이렇게 변경은 되었지만 화면상에서는 number의 값은 여전히 2로 렌더링이 새롭게 되지 않았습니다.

이상...하다...?

기본적으로 Vue에서는 data속성을 template에서 사용하는 경우 Vue는 data속성에 있는 값이 변하면 (updated) 감지하여 다시 렌더링을 실행합니다.

https://kr.vuejs.org/v2/guide/list.html#배열-변경-감지

https://kr.vuejs.org/v2/guide/list.html#배열-변경-감지

리스트 렌더링 — Vue.js

여기에 보면 인덱스에 배열로 있는경우 변경 사항을 감지할 수 없다고 합니다. 

왜냐하면 data에 바인딩 되어있는 속성의 주소 값이 변경되어야 Vue에서 변화를 감지하고 리렌더링을 합니다.

 

그렇다면 변경을 감지하려면 어떻게 해야 할까요?

 

위와 같은 메소드를 사용하여서 데이터의 변화를 감지할 수 있도록 합니다.

methods: {
    editStep(stepData, index) {
        this.formData.steps.splice(index, 1, editStepData);
    },
}

이렇게 하면 원하는 인덱스에 1개의 값을 원하는 데이터로 변경할 수 있습니다.

 

splice를 더 자세하게 다루는 것은 아래 사이트에서 참조해주세요.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

 

이번에는 배열을 다루다가 왜 리렌더링이 안되지?라는 접근을 하다가 발견한 것을 포스팅해 봤습니다.

배열을 많이 다루기에 유념해야겠습니다.

 

 

 

 

 

 

 

참조: 

https://medium.com/@su_bak/vue-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4-%EC%95%88%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0-2d5f1934c44e

Vue 리렌더링이 안되는 경우

https://kr.vuejs.org/v2/guide/list.html#%EA%B0%9D%EC%B2%B4-%EB%B3%80%EA%B2%BD-%EA%B0%90%EC%A7%80%EC%97%90-%EA%B4%80%ED%95%9C-%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD

리스트 렌더링 — Vue.js