21번 라인을 보면 lodash 문법중 하나인 _.cloneDeep()를 사용하여 깊은 복사를 한뒤에 22번 라인에서 _.merge를 해주니 잘됫다.
사실 아직도 원인은 잘 모르겠다....원인을 찾아보려고 Object.getOwnPropertyDescriptors()를 사용하여 읽기쓰기 가능여부를 체크한결과
- enumerable : true 또는 false, 열거 가능한지 여부
- configurable : true 또는 false, 제거 가능한지 여부 value (선택) property의 값, 기본은 undefined
- writable : true 또는 false, true이면 읽기 쓰기 가능이고 false이면 읽기만 가능
모두 True 였다....원인은 뭔지는 모르겠으나 깊은복사로 해결을 했고 lodash에 _.merge, _.cloneDeep()함수를 찾아보다보니 적고 싶은게 생겨 우선 끄적여본다...ㅋ
[객체를 합치는 방법]
1. 반복문
2. Object.assign()[얕은 복사_Shallow Copy]
3. Spread Operator (전개 연산자)[얕은 복사_Shallow Copy]
4. _.merge (lodash 라이브러리)[깊은 복사_Deep Copy]
Spread Operator나 Object.assign을 이용해서 객체를 병합하면
Shallow Copy(얕은 복사)가 되면서 두 객체가 합쳐집니다.
Spread Operator나 Object.assign()을 이용하면 위 의 예제와 같이
객체의 속성값이 Object(객체)이거나 Array와 같이 Reference Type일 경우에는
해당 객체의 값이 복사되는게 아니라, 해당 객체를 참조하는 주소값을 복사하면서
두 객체를 병합하게 됩니다.(Reference Type이 아닌, 문자열이나 숫자 등은 주소값이 아닌 실제값이 복사됩니다.)
이것은 Object.assign()의 경우도 마찬가지 입니다.
이러한 현상을 피하고,
실제 값을 복사하고 싶을 때는 lodash 라이브러리의 '_.merge()' 함수를 이용할 수 있습니다. (Deep Copy)
출처: https://hianna.tistory.com/466 [어제 오늘 내일]