[React] DeepCopy 직접 구현 (깊은 복사)

간단 정리

shallowCopy ( 얕은 복사 - 기본값 ) : 단순 변수는 복사되고

        오브젝트/배열에 대해서는 같은 메모리를 사용         (값을 바꾸면 기존 오브젝트/배열 값도 같이 바뀜)

 

deepCopy ( 깊은 복사 ) : 오브젝트/배열을 새로운 메모리에 할당    (값을 바꿔도 기존 오브젝트/배열 값과 무관)

 

간단한 얕은 복사 예시..

  const zzz = [123, 456, 789];

  const xxx = zzz; //같은 메모리 참조

  zzz[0] = 66; //xxx[0]도 66

  xxx[1] = 876; //zzz[1] 도 876

  console.log(zzz, xxx); 

// zzz = [66, 876, 789],     xxx = [66, 876, 789]  운명을 함께..

 

 

 _ (lodash) 라는 좋은 라이브러리가 있습니다만 직접 구현해봤습니다. (왜 이런거에 관심이 있으까..ㅋ)

 

origin 과 shallow은 서로 값에 영향. deepcopy는 값 영향 x

 

 

const DeepCopy = (target) => {
  //단순 변수는 그냥 반환
  if (!(target instanceof Object)) {
    return target;
  }

  //배열인 경우는 배열 순회 후 반환
  if (Array.isArray(target)) {
    let arr = [];

    for (let i = 0; i < target.length; ++i) {
      arr.push(DeepCopy(target[i]));
    }

    return arr;
  }

  let newValue = {};
  //오브젝트 형태인 경우 모든 키에 대해 순환 후 반환
  for (let key of Object.keys(target)) {
    if (target[key] instanceof Object) {
      // console.log("key : ", key, "target[key] : ", target[key]);
      if (Array.isArray(target[key])) {
        let arr = [];

        for (let i = 0; i < target[key].length; ++i) {
          arr.push(DeepCopy(target[key][i]));
        }

        newValue = {
          ...newValue,
          [key]: arr,
        };
      } else {
        newValue = {
          ...newValue,
          [key]: DeepCopy(target[key]),
        };
      }
    } else {
      // console.log("key : ", key, "target[key] : ", target[key]);
      newValue = { ...newValue, [key]: target[key] };
    }
  }

  return newValue;
};

const DeepCopyTest = () => {
  const origin1 = {
    a: 123,
    target: {
      b: 456,
      target2: [
        {
          c: 789,
          x: [123, 456, 789],
        },
      ],
    },
  };

  const shallowCopy1 = origin1;
  const deepCopy1 = DeepCopy(origin1);

  shallowCopy1.a = 3;
  origin1.target.target2[0].c = 54;
  origin1.target.target2[0].x[0] = 11111;
  origin1.target.b = 88;

  console.log("origin 1 : ", origin1);
  console.log("shallowCopy 1 : ", shallowCopy1);
  console.log("deepcopy 1 : ", deepCopy1);

  const origin2 = [
    {
      v1: 12,
    },
    {
      v2: 56,
      v3: [
        {
          v4: 123,
        },
        123123123123,
      ],
    },
  ];

  const shallowCopy2 = origin2;
  const deepCopy2 = DeepCopy(origin2);

  origin2[0].v1 = 43666;
  origin2[1].v3[0].v4 = 88;
  origin2[1].v3[1] = 543;

  console.log("origin 2 : ", origin2);
  console.log("shallowCopy 2 : ", shallowCopy2);
  console.log("deepcopy 2 : ", deepCopy2);

  return <></>;
};

export default DeepCopyTest;