바인딩 된 변수가 변화를 감지하지 못할때

개요: 부모 컴포넌트에서 자식 컴포넌트에 변수를 바인딩 하였는데, 부모 컴포넌트에서 변화가 되어도 자식 컴포넌트에서 변화를 인지하지 못함

---

단순히 변수가 재할당 되거나, 값이 변화하는건 자식 컴포넌트에서도 변화를 인지함.

switchData() {
  // i를 재할당 했을 시, 변화된 값이 lf-app 컴포넌트에 들어감
  this.i = 4;
}


// 아래 html은 바인딩 하는 예시)
<div (click)="switchData()"></div>
<lf-app
  [someObject]="someObject"
  [index]="i"
 ></lf-app>

 

그런데 변화될 변수를 전체 재할당 하는게 아니라, 요소만 변화하게 된다면 그 변화를 인지하지 못함 (angular만 그러는진 모르겠음 다른 프레임워크 이용하는 분들 해보시고 알려주셈)

switchData() {
  // someObject의 어느 한 요소만 변경했을 시, lf-app 컴포넌트에선 someObject의 전체 변화가 있는지 인지하지 못함
  this.someObject[i] = !this.someObject[i];
}


// 아래 html은 바인딩 하는 예시)
<div (click)="switchData()"></div>
<lf-app
  [someObject]="someObject"
  [index]="i"
 ></lf-app>

---

그래서 만들어낸 꼼수

switchData() {
  // 새로운 object에 씌워서 재할당 씌워버리면 데이터 변경이 자식컴포넌트에서도 보임ㅋㅋ
  this.someObject = { ...this.someObject, [i]: !this.someObject[i]};
}


// 아래 html은 바인딩 하는 예시)
<div (click)="switchData()"></div>
<lf-app
  [someObject]="someObject"
  [index]="i"
 ></lf-app>

 

새로운 object 만들어서 스프레드 연산자로 만들면 변화로 인식하더라 요놈