02/16 [React] 객체복사

Shallow Copy 

- string,number 및 number타입의 기본 자료형의 데이터는 복사를 했을때 값이 복사가 되고 
  독립적인 값이 저장이 된다.
  그러나 객체의 복사는 얕은 복사 와 깊는 복사로 나눈다.
  기본 자료형처럼 복사했을때 객체는 얕은 복사가 수행된다 

-Object.assign()메소드로 복사:원본 객체의 열거가능한 모든 프로퍼티를 복사해준다.
                          단, 원본 객체가 중첩 객체인 경우 역시 얕은 복사가 수행된다.

  -중첩 객체가 아닌 경우:깊은 복사처럼 수행됨

-중첩 객체인 경우:얕은 복사가 수행됨

let obj1={ x:1,y:2,z:{z1:10,z2:20}};
let obj2=Object.assign({},obj1);
obj2.z.z1=100;
obj2.z.z2=200;
console.log(obj1);//{ x: 1, y: 2,z: { z1: 100, z2: 200}}
console.log(obj2);//{ x: 1, y: 2,z: { z1: 100, z2: 200}}

 

-Spread연산자로 객체 복사
-중첩 객체가 아닌 경우:깊은 복사처럼 수행됨

let obj1={ x:1,y:2};
let obj2={...obj1};
obj2.x=10;
obj2.y=20;
console.log(obj1);//{ x: 1, y: 2}
console.log(obj2);//{ x: 10, y: 20}

 

-중첩 객체인 경우:얕은 복사가 수행됨

 

-서드파티 라이브러리 사용

 

   <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script>
        let obj1={ x:1,y:2,z:{z1:10,z2:20}};
        let obj2 = _.cloneDeep(obj1);
        console.log(obj2)
        obj1.z.z1='one';
        obj2.z.z2='two'
        console.log(obj2)
        console.log(obj1)
    </script>

 

 

deepcopy