JavaScript - 원시값 (Primitive Values) 과 객체 (Feat. CloneDeep)

* 원시값이란? 불변한값

원시값의 종류

1.  문자열(string)

2. 숫자(number)

3. 불리언(Boolean)

4. null과 undefined

 

*객체(Object) 객체는 프로퍼티(속성)를 포함하며, 프로퍼티는 값을 가지거나 다른 객체를 참조

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

 

*깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)

 

1. 깊은 복사(Deep Copy)
원본 객체와 복사본이 완전히 독립적으로 되도록 하는 방법

// 깊은 복사 예제
let originalObject = { name: "John", address: { city: "New York" } };
let deepCopyObject = JSON.parse(JSON.stringify(originalObject));
let deepCopyObject = cloneDeep(originalObject);

 

2. 얕은 복사(Shallow Copy)
얕은 복사는 객체를 복사할 때, 최상위 레벨의 프로퍼티만을 복사하는 것

// 얕은 복사 예제
let originalObject = { name: "John", address: { city: "New York" } };
let shallowCopyObject = { ...originalObject };

 

 

추가

 

이러한 불변성 때문에 앵귤러 프로젝트를 사용할때 이슈가 있었다.

@Input 으로 데이터를 주고 받는 과정에서 제대로 값이 바뀌지않는 이슈였다. 

비슷한 이슈가 있을수 있으니 한번 그부분도 정리해보겠다.

 

1. 객체 전체를 갈아엎기:

// 부모 컴포넌트에서
this.parentObject = { ...this.parentObject, property: "new value" };

 

2.OnChanges 사용:

// 자식 컴포넌트에서
ngOnChanges(changes: SimpleChanges) {
  if (changes.inputObject) {
    this.internalState = { ...changes.inputObject.currentValue };
  }
}

 

3. 객체 타입이 아니라 원시값으로 Input 변경

기존 객체 방식의 코드
- 오브젝트 전체를 전달하는 방식이었다
<app-calendar [time]="searchCondition"><app-calendar>

원시값으로 변경한 방식의 코드
- 스트링으로 시간 데이터만 전달했다
<app-calendar [time]="searchCondition.filter.time"><app-calendar>

 

 

3번째 방법으로 수정하니깐 변화감지가 제대로 되서 이슈를 해결했다. 매우 굳