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

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

반응형

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

1 2 3 4 5 6 7 data() { return { steps: [ {name: 'step1', number:1}, {name: 'step2', number:2}, {name: 'step3', number:3} ], } } Colored by Color Scripter cs

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

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

1 2 3 4 5 methods: { editStep(stepData, index) { this.formData.steps[index] = editStepData; }, } Colored by Color Scripter cs 메소드 실행 이후 데이터가 변경되어 원하는 값은 {name: 'step1', number:1}, {name: 'step2', number:222}, {name: 'step3', number:3}

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

이상...하다...?

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

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

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

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

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

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

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

1 2 3 4 5 methods: { editStep(stepData, index) { this.formData.steps.splice(index, 1, editStepData); }, } Colored by Color Scripter cs

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

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

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

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

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

참조:

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

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

반응형

from http://dreamcoding.tistory.com/45 by ccl(A) rewrite - 2021-11-22 11:02:06