reactive( array ) 선언 후 array에 filter... - 인프런

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

반응형 기초 (Reactivity)

reactive( array ) 선언 후 array에 filter를 사용하면 반응이 안되요

작성

1.1K

let itemsReactive = reactive([
  { id: 1, name: '딸기1', check: true },
  { id: 2, name: '딸기2', check: true },
  { id: 3, name: '딸기3', check: true },
  { id: 4, name: '딸기4', check: true },
]);

const deleteItemReactive = id => {
  let tempItems = itemsReactive.filter(item => item.id !== id);
  itemsReactive = tempItems;
};

const updateItemReactive = id => {
  let tempItem = itemsReactive.find(item => item.id === id);
  tempItem.check = !tempItem.check;
};

위 코드에서 updateItemReactive 함수는 check값이 true, false 바뀌는 것을 확인할 수 있는데

deleteItemReactive 함수를 사용하면 반응이 안되고 있습니다.

vuejs devtools로 확인해보니까 바뀌기 전에는 ItemsReactive = Reactive이고 배열 안에 요소들은 Object인데

deleteItemReactive 함수를 실행하면

ItemsReactive = Array 이고 배열 안 요소들이 Reactive로 바뀌는 것을 확인했습니다. 왜 이렇게 나오는지 모르겠습니다.

vuejs

답변 1

짐코딩

지식공유자

안녕하세요 :)

deleteItemReact 함수 호출시 반응이 안되는 이유는 itemsReactive = tempItems; 값(메모리) 자체를 변경하기 때문입니다.

만약 배열의 전체값을 변경하고 싶다면 아래 처럼 ref함수를 사용하여 문제를 해결할 수 있습니다.

let itemsReactive = ref([
  { id: 1, name: '딸기1', check: true },
  { id: 2, name: '딸기2', check: true },
  { id: 3, name: '딸기3', check: true },
  { id: 4, name: '딸기4', check: true },
]);

const deleteItemReactive = (id) => {
  let tempItems = itemsReactive.value.filter((item) => item.id !== id);
  itemsReactive.value = tempItems;
};

const updateItemReactive = (id) => {
  let tempItem = itemsReactive.value.find((item) => item.id === id);
  tempItem.check = !tempItem.check;
};

관련하여 설명은 해당 강의 [반응형 기초 강의 5분 31초] 쯤 보시면 같은 맥락이기 때문에 한번 보시는 것을 권장드려요.

이렇게 반응이 안되는 이유는 자바스크립트 언어 특성상 변수에 새로운 값이 할당 하기 때문이에요.
(참고 Call By Value & Call By Reference)

감사합니다 🙂

휘리릭

안녕하세요 글쓰신분이랑 비슷한 생각을 해서 질문드립니다! 그러면 반영이 되지 않는 이유가 ItemsReactive가 가지고 있던 reactive 속성들이 새로운 데이터에 의해 덮어진거라고 생각을 하는게 맞는걸까요..?

인프런 커뮤니티 질문&답변

reactive( array ) 선언 후 array에 filter를 사용하면 반응이 안되요