[react] object 깊은 복사하는 함수

안녕하세요! 

좋아요요정입니다 :) 오늘은 object 깊은 복사를 진행했습니다.

 

테이블에 입력되는 column을 복제해서 일부 값을 수정하고 반환 수정하는데 setState를 선언하지 않았음에도 변경되었습니다.

이유는 { ... } 은 shallow copy를 하기 때문!

const object = {
	a: 'aa',
    b: 'bb',
    c: ['c','cc']
}

const copy = { ...object }

이 경우, object에는 데이터가 저장되는 것이 아니라 데이터의 값을 가리키는 참조값이 저장됩니다.

그 참조값을 복사해 데이터를 수정하니, 결국 그 내부의 값이 변경된 것입니다.

 

복사 전 변수도, 복사한 변수도 결국 같은 데이터를 가리키고 있던 것이죠.

 

 

 

깊은 복사하는 방법1 

- JSON객체를 이용하는 방법

const cloneObject = (obj) => {
	return JSON.parse(JSON.stringify(obj)
}

- JSON은 텍스트로 변환되기 때문에 이 경우 텍스트가 아닌 경우 문제가 발생합니다. 

 

 

깊은 복사하는 방법2 ⭐️

- 배열, 오브젝트를 대응할 수 있는 함수

function cloneObject(obj) {
    let clone = {};
    for(let i in obj) {
      if(typeof(obj[i])=="object" && obj[i] != null) {
        if(Array.isArray(obj[i])) {
          clone[i] = [];
          for(let k in obj[i]) {
            clone[i][k] = JSON.parse(JSON.stringify(obj[i][k]));
          }
        } else {
          clone[i] = cloneObject(obj[i]);
        }
      } else {
        let j = Object.getOwnPropertyDescriptor(obj, i);
        clone[i] = j.value
      }
    }
    return clone;
  }

- 오브젝트 내부의 배열이 object로 찍혀서 당황했습니다.(왜 그런지 아시는분? 참조값이 연결되어있다는 뜻인가요?)

- isArray()로 배열여부를 체크하고 배열을 복사했습니다.

- object가 아닌 경우에는 Object.getOwnPropertyDescriptor() 를 이용해 value값을 복사했습니다.

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor() - JavaScript | MDN

 

 

오늘도 하나 해결! 

크으 뿌듯하네요..  

 

올해가 얼마 남지 않았습니다. :) 남은 목표들 이루시는 올해되시길 바랍니다!

이상 좋아요요정이었습니다. 행복한 코딩라이프되세요!