Skip to main content

📋 얕은 복사 vs 깊은 복사

📖 정의​

**얕은 복사(Shallow Copy)**는 객체의 최상위 레벨만 복사하고 중첩된 객체는 참조를 공유합니다. **깊은 복사(Deep Copy)**는 중첩된 모든 객체를 재귀적으로 복사하여 완전히 독립적인 복사본을 만듭니다.

🎯 비유로 이해하기​

아파트 비유​

얕은 복사와 깊은 복사를 아파트에 비유하면:

원본 아파트
├─ 거실 (1층 데이터)
│  ├─ TV
│  └─ 소파
└─ 방 (중첩 객체)
   ├─ 침대
   └─ 책상

얕은 복사 (Shallow Copy)
├─ 새 아파트 열쇠 만들기
├─ 거실은 새로 복사 (TV, 소파 복사)
└─ 방은 원본과 같은 방 사용 (참조 공유)

결과:
원본.방.침대 = "더블침대"
→ 복사본.방.침대도 "더블침대" (같은 방!)

깊은 복사 (Deep Copy)
├─ 완전히 새 아파트 짓기
├─ 거실도 새로 만들기
└─ 방도 새로 만들기 (가구도 모두 복제)

결과:
원본.방.침대 = "더블침대"
→ 복사본.방.침대는 변경 없음 (다른 방!)

문서 복사 비유​

원본 문서 (중첩 구조)
├─ 1장: 제목 (원시값)
└─ 2장: 참고자료 (객체)
   ├─ 링크 목록
   └─ 이미지

얕은 복사
├─ 새 문서 만들기
├─ 1장 복사 (텍스트 그대로 복사)
└─ 2장은 원본과 같은 폴더 참조

원본 참고자료 수정 시:
→ 복사본도 같은 변경 보임!

깊은 복사
├─ 새 문서 만들기
├─ 1장 복사
└─ 2장도 새 폴더에 모든 파일 복사

원본 참고자료 수정 시:
→ 복사본은 영향 없음!

연필 상자 비유​

원본 상자
├─ 연필 3자루 (원시값)
└─ 작은 상자 (중첩 객체)
   └─ 지우개 2개

얕은 복사
├─ 큰 상자 새로 만들기
├─ 연필 3자루 복사
└─ 작은 상자는 원본과 같은 상자

작은 상자에서 지우개 1개 꺼내면:
원본 작은 상자: 지우개 1개
복사본 작은 상자: 지우개 1개 (같은 상자!)

깊은 복사
├─ 큰 상자 새로 만들기
├─ 연필 3자루 복사
└─ 작은 상자도 새로 만들어서 지우개 복사

작은 상자에서 지우개 1개 꺼내면:
원본 작은 상자: 지우개 1개
복사본 작은 상자: 지우개 2개 (다른 상자!)

⚙️ 작동 원리​

1. 참조 vs 값​

// 원시 타입: 값 복사
let a = 10;
let b = a;  // 값 복사

b = 20;
console.log(a);  // 10 (변경 없음)
console.log(b);  // 20

// 객체 타입: 참조 복사
let obj1 = { name: '철수' };
let obj2 = obj1;  // 참조 복사 (같은 객체)

obj2.name = '영희';
console.log(obj1.name);  // 영희 (변경됨!)
console.log(obj2.name);  // 영희

// 메모리 구조
/*
원시값:
a: [10]
b: [20]  ← 독립적인 메모리

객체:
obj1: [메모리 주소 0x001] ─┐
                           ├─> { name: '영희' }
obj2: [메모리 주소 0x001] ─┘
      └─ 같은 주소!
*/

// 참조 비교
console.log(obj1 === obj2);  // true (같은 참조)

const obj3 = { name: '영희' };
console.log(obj1 === obj3);  // false (다른 참조, 내용은 같아도)

2. 얕은 복사​

// 1. Spread 연산자 (...)
const original = {
  name: '철수',
  age: 25,
  address: {
    city: '서울',
    district: '강남'
  }
};

const shallow1 = { ...original };

// 1단계는 복사됨
shallow1.name = '영희';
console.log(original.name);  // 철수 (변경 없음)

// 2단계는 참조 공유
shallow1.address.city = '부산';
console.log(original.address.city);  // 부산 (변경됨!)

// 2. Object.assign()
const shallow2 = Object.assign({}, original);

shallow2.age = 30;
console.log(original.age);  // 25 (변경 없음)

shallow2.address.district = '서초';
console.log(original.address.district);  // 서초 (변경됨!)

// 3. Array.slice()
const arr1 = [1, 2, [3, 4]];
const arr2 = arr1.slice();

arr2[0] = 10;
console.log(arr1[0]);  // 1 (변경 없음)

arr2[2][0] = 30;
console.log(arr1[2][0]);  // 30 (변경됨!)

// 4. Array.concat()
const arr3 = [1, 2, [3, 4]];
const arr4 = [].concat(arr3);

arr4[2][1] = 40;
console.log(arr3[2][1]);  // 40 (변경됨!)

// 얕은 복사의 문제
const user = {
  name: '철수',
  hobbies: ['축구', '농구']
};

const copiedUser = { ...user };

copiedUser.hobbies.push('야구');
console.log(user.hobbies);  // ['축구', '농구', '야구']
// 원본도 변경됨!

3. 깊은 복사​

// 1. JSON 방법 (간단하지만 제한적)
const original = {
  name: '철수',
  age: 25,
  address: {
    city: '서울',
    district: '강남'
  },
  hobbies: ['축구', ['농구', '야구']]
};

const deep1 = JSON.parse(JSON.stringify(original));

deep1.address.city = '부산';
deep1.hobbies[1][0] = '배구';

console.log(original.address.city);  // 서울 (변경 없음!)
console.log(original.hobbies[1][0]); // 농구 (변경 없음!)

// ❌ JSON 방법의 한계
const problematic = {
  date: new Date(),
  regex: /test/g,
  func: () => console.log('hi'),
  undefined: undefined,
  symbol: Symbol('id'),
  circular: null
};
problematic.circular = problematic;  // 순환 참조

// const copied = JSON.parse(JSON.stringify(problematic));
// - date: 문자열로 변환됨
// - regex: 빈 객체 {}
// - func: 사라짐
// - undefined: 사라짐
// - symbol: 사라짐
// - circular: 에러 발생

// 2. structuredClone() (최신, 권장!)
const deep2 = structuredClone(original);

deep2.address.city = '대구';
console.log(original.address.city);  // 서울 (변경 없음!)

// structuredClone 장점:
// - Date, RegExp, Map, Set 지원
// - 순환 참조 지원
// - ArrayBuffer 등 복잡한 타입 지원

const complex = {
  date: new Date(),
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  buffer: new ArrayBuffer(8)
};

const cloned = structuredClone(complex);
// 모두 제대로 복사됨!

// ❌ structuredClone 한계
const withFunction = {
  func: () => console.log('hi')
};
// const copied = structuredClone(withFunction);  // 에러!
// 함수는 복사 불가

// 3. 재귀 함수 (완전 제어)
function deepCopy(obj, map = new WeakMap()) {
  // null, undefined, 원시값
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // 순환 참조 처리
  if (map.has(obj)) {
    return map.get(obj);
  }

  // Date
  if (obj instanceof Date) {
    return new Date(obj);
  }

  // RegExp
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }

  // Map
  if (obj instanceof Map) {
    const mapCopy = new Map();
    map.set(obj, mapCopy);
    obj.forEach((value, key) => {
      mapCopy.set(key, deepCopy(value, map));
    });
    return mapCopy;
  }

  // Set
  if (obj instanceof Set) {
    const setCopy = new Set();
    map.set(obj, setCopy);
    obj.forEach(value => {
      setCopy.add(deepCopy(value, map));
    });
    return setCopy;
  }

  // 배열
  if (Array.isArray(obj)) {
    const arrCopy = [];
    map.set(obj, arrCopy);
    obj.forEach((item, index) => {
      arrCopy[index] = deepCopy(item, map);
    });
    return arrCopy;
  }

  // 객체
  const objCopy = {};
  map.set(obj, objCopy);

  Object.keys(obj).forEach(key => {
    objCopy[key] = deepCopy(obj[key], map);
  });

  return objCopy;
}

// 사용
const test = {
  a: 1,
  b: { c: 2 },
  d: [3, { e: 4 }]
};

const testCopy = deepCopy(test);
testCopy.b.c = 20;
testCopy.d[1].e = 40;

console.log(test.b.c);    // 2 (변경 없음!)
console.log(test.d[1].e); // 4 (변경 없음!)

// 4. Lodash 라이브러리
// import _ from 'lodash';

// const deep3 = _.cloneDeep(original);
// 모든 경우 잘 처리됨

4. 중첩 레벨별 복사​

// 1단계 중첩
const level1 = {
  name: '철수',
  age: 25
};

// 얕은 복사로 충분
const copy1 = { ...level1 };

copy1.name = '영희';
console.log(level1.name);  // 철수 (OK!)

// 2단계 중첩
const level2 = {
  name: '철수',
  address: {
    city: '서울'
  }
};

// ❌ 얕은 복사
const copy2Shallow = { ...level2 };
copy2Shallow.address.city = '부산';
console.log(level2.address.city);  // 부산 (문제!)

// ✅ 수동 2단계 복사
const copy2Deep = {
  ...level2,
  address: { ...level2.address }
};
copy2Deep.address.city = '대구';
console.log(level2.address.city);  // 부산 (OK!)

// 3단계 중첩
const level3 = {
  name: '철수',
  address: {
    city: '서울',
    detail: {
      street: '강남대로'
    }
  }
};

// ✅ 수동 3단계 복사
const copy3 = {
  ...level3,
  address: {
    ...level3.address,
    detail: {
      ...level3.address.detail
    }
  }
};

// 복잡해짐! → 깊은 복사 필요

// 배열 중첩
const nestedArray = [
  [1, 2],
  [3, [4, 5]],
  [6, [7, [8, 9]]]
];

// ❌ 얕은 복사
const shallowArr = [...nestedArray];
shallowArr[0][0] = 10;
console.log(nestedArray[0][0]);  // 10 (문제!)

// ✅ 깊은 복사
const deepArr = structuredClone(nestedArray);
deepArr[2][1][1][0] = 80;
console.log(nestedArray[2][1][1][0]);  // 8 (OK!)

5. 성능 비교​

// 성능 테스트

const largeObject = {
  a: Array(1000).fill({ b: { c: 1 } })
};

// 1. Spread (빠름, 얕은 복사)
console.time('Spread');
const spread = { ...largeObject };
console.timeEnd('Spread');  // ~0.1ms

// 2. Object.assign (빠름, 얕은 복사)
console.time('Object.assign');
const assigned = Object.assign({}, largeObject);
console.timeEnd('Object.assign');  // ~0.1ms

// 3. JSON (중간, 깊은 복사)
console.time('JSON');
const jsonCopy = JSON.parse(JSON.stringify(largeObject));
console.timeEnd('JSON');  // ~5ms

// 4. structuredClone (중간, 깊은 복사)
console.time('structuredClone');
const structured = structuredClone(largeObject);
console.timeEnd('structuredClone');  // ~3ms

// 5. 재귀 함수 (느림, 깊은 복사)
console.time('Recursive');
const recursive = deepCopy(largeObject);
console.timeEnd('Recursive');  // ~10ms

// 6. Lodash (중간, 깊은 복사)
// console.time('Lodash');
// const lodash = _.cloneDeep(largeObject);
// console.timeEnd('Lodash');  // ~7ms

/*
성능 순위:
1. Spread / Object.assign (가장 빠름)
2. structuredClone (빠름)
3. JSON (보통)
4. Lodash (보통)
5. 재귀 함수 (느림)

선택 기준:
- 1단계만: Spread
- 깊은 복사 필요 + 최신 브라우저: structuredClone
- 깊은 복사 필요 + 구형 브라우저: JSON or Lodash
- 특수 타입 포함: 재귀 함수 or Lodash
*/

💡 실제 예시​

React State 불변성​

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '공부하기', completed: false },
    { id: 2, text: '운동하기', completed: false }
  ]);

  // ❌ 잘못된 방법: 직접 수정
  const toggleWrong = (id) => {
    const todo = todos.find(t => t.id === id);
    todo.completed = !todo.completed;
    setTodos(todos);  // React가 변화 감지 못함!
  };

  // ✅ 올바른 방법: 얕은 복사
  const toggleCorrect = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id
        ? { ...todo, completed: !todo.completed }  // 새 객체
        : todo
    ));
  };

  // 중첩 객체
  const [user, setUser] = useState({
    name: '철수',
    profile: {
      age: 25,
      address: {
        city: '서울'
      }
    }
  });

  // ❌ 잘못된 방법
  const updateCityWrong = (city) => {
    user.profile.address.city = city;
    setUser(user);  // 변화 감지 못함!
  };

  // ✅ 올바른 방법: 깊은 복사
  const updateCityCorrect = (city) => {
    setUser({
      ...user,
      profile: {
        ...user.profile,
        address: {
          ...user.profile.address,
          city: city
        }
      }
    });
  };

  // 또는 Immer 라이브러리
  // import { produce } from 'immer';
  //
  // const updateCityImmer = (city) => {
  //   setUser(produce(user, draft => {
  //     draft.profile.address.city = city;
  //   }));
  // };

  return (
    <div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleCorrect(todo.id)}
            />
            {todo.text}
          </li>
        ))}
      </ul>

      <div>
        <p>{user.name}</p>
        <p>{user.profile.address.city}</p>
        <button onClick={() => updateCityCorrect('부산')}>
          부산으로 이사
        </button>
      </div>
    </div>
  );
}

Redux Reducer​

// Redux: 항상 새 객체 반환

// ❌ 잘못된 Reducer
function badReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      state.todos.push(action.payload);  // 직접 수정!
      return state;  // 같은 참조

    case 'UPDATE_USER':
      state.user.name = action.payload;
      return state;

    default:
      return state;
  }
}

// ✅ 올바른 Reducer
function goodReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]  // 새 배열
      };

    case 'UPDATE_USER':
      return {
        ...state,
        user: {
          ...state.user,
          name: action.payload  // 새 객체
        }
      };

    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };

    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload)
      };

    default:
      return state;
  }
}

// Redux Toolkit (간편)
import { createSlice } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: {
    todos: [],
    user: { name: '' }
  },
  reducers: {
    addTodo: (state, action) => {
      // Immer 내장: 직접 수정처럼 보이지만 불변성 유지
      state.todos.push(action.payload);
    },

    updateUser: (state, action) => {
      state.user.name = action.payload;
    },

    toggleTodo: (state, action) => {
      const todo = state.todos.find(t => t.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    }
  }
});

배열 복사 패턴​

// 배열 복사의 다양한 패턴

const numbers = [1, 2, 3, 4, 5];

// 1. 전체 복사
const copy1 = [...numbers];
const copy2 = numbers.slice();
const copy3 = Array.from(numbers);
const copy4 = numbers.map(n => n);

// 2. 요소 추가
const addStart = [0, ...numbers];  // [0,1,2,3,4,5]
const addEnd = [...numbers, 6];    // [1,2,3,4,5,6]
const addMiddle = [...numbers.slice(0, 2), 2.5, ...numbers.slice(2)];
// [1,2,2.5,3,4,5]

// 3. 요소 제거
const removeFirst = numbers.slice(1);  // [2,3,4,5]
const removeLast = numbers.slice(0, -1);  // [1,2,3,4]
const removeIndex = [
  ...numbers.slice(0, 2),
  ...numbers.slice(3)
];  // [1,2,4,5] (인덱스 2 제거)

// 4. 요소 수정
const updateIndex = numbers.map((n, i) =>
  i === 2 ? 30 : n
);  // [1,2,30,4,5]

// 5. 필터링
const evens = numbers.filter(n => n % 2 === 0);  // [2,4]

// 중첩 배열
const nested = [[1, 2], [3, 4], [5, 6]];

// ❌ 얕은 복사
const shallowCopy = [...nested];
shallowCopy[0][0] = 10;
console.log(nested[0][0]);  // 10 (변경됨!)

// ✅ 깊은 복사
const deepCopy = nested.map(arr => [...arr]);
deepCopy[0][0] = 100;
console.log(nested[0][0]);  // 10 (변경 없음!)

// 객체 배열
const users = [
  { id: 1, name: '철수', age: 25 },
  { id: 2, name: '영희', age: 23 }
];

// ❌ 얕은 복사
const usersCopy = [...users];
usersCopy[0].age = 30;
console.log(users[0].age);  // 30 (변경됨!)

// ✅ 깊은 복사
const usersDeepCopy = users.map(user => ({ ...user }));
usersDeepCopy[0].age = 35;
console.log(users[0].age);  // 30 (변경 없음!)

// 객체 배열 수정
const updateUser = (users, id, updates) => {
  return users.map(user =>
    user.id === id
      ? { ...user, ...updates }
      : user
  );
};

const updated = updateUser(users, 1, { age: 26 });
console.log(users[0].age);    // 25 (원본 유지)
console.log(updated[0].age);  // 26 (복사본 수정)

객체 병합​

// 객체 병합 시 복사

const defaults = {
  theme: 'light',
  fontSize: 14,
  sidebar: {
    width: 200,
    position: 'left'
  }
};

const userSettings = {
  theme: 'dark',
  sidebar: {
    width: 300
  }
};

// ❌ 얕은 병합
const merged1 = { ...defaults, ...userSettings };
console.log(merged1);
// {
//   theme: 'dark',
//   fontSize: 14,
//   sidebar: { width: 300 }  // position 사라짐!
// }

// ✅ 깊은 병합
function deepMerge(target, source) {
  const result = { ...target };

  for (const key in source) {
    if (source[key] instanceof Object && key in target) {
      result[key] = deepMerge(target[key], source[key]);
    } else {
      result[key] = source[key];
    }
  }

  return result;
}

const merged2 = deepMerge(defaults, userSettings);
console.log(merged2);
// {
//   theme: 'dark',
//   fontSize: 14,
//   sidebar: { width: 300, position: 'left' }  // 유지됨!
// }

// Lodash merge
// import _ from 'lodash';
// const merged3 = _.merge({}, defaults, userSettings);

// 배열 포함 병합
const config1 = {
  plugins: ['A', 'B'],
  settings: { x: 1 }
};

const config2 = {
  plugins: ['C'],
  settings: { y: 2 }
};

// 기본 병합
const basic = { ...config1, ...config2 };
console.log(basic.plugins);  // ['C'] (덮어씀)

// 배열 합치기
const combined = {
  ...config1,
  ...config2,
  plugins: [...config1.plugins, ...config2.plugins],
  settings: { ...config1.settings, ...config2.settings }
};
console.log(combined.plugins);  // ['A','B','C']
console.log(combined.settings); // { x:1, y:2 }

캐싱과 메모이제이션​

// 객체 복사를 활용한 캐싱

class DataCache {
  constructor() {
    this.cache = new Map();
  }

  // 데이터 저장 (깊은 복사)
  set(key, value) {
    this.cache.set(key, structuredClone(value));
  }

  // 데이터 가져오기 (깊은 복사)
  get(key) {
    const value = this.cache.get(key);
    return value ? structuredClone(value) : undefined;
  }

  // 원본 보호!
  has(key) {
    return this.cache.has(key);
  }
}

// 사용
const cache = new DataCache();

const user = {
  name: '철수',
  settings: { theme: 'dark' }
};

cache.set('user', user);

// 가져온 데이터 수정
const cached = cache.get('user');
cached.settings.theme = 'light';

// 캐시된 원본은 안전
const original = cache.get('user');
console.log(original.settings.theme);  // dark

// React 메모이제이션
import React, { useMemo, useCallback } from 'react';

function ExpensiveComponent({ data }) {
  // 데이터 복사 + 연산
  const processedData = useMemo(() => {
    // 원본 보호하며 처리
    const copied = data.map(item => ({ ...item }));

    return copied.map(item => ({
      ...item,
      processed: heavyCalculation(item)
    }));
  }, [data]);

  return (
    <div>
      {processedData.map(item => (
        <div key={item.id}>{item.processed}</div>
      ))}
    </div>
  );
}

// 함수 메모이제이션
function memoize(fn) {
  const cache = new Map();

  return function(...args) {
    // 인자를 복사하여 키로 사용
    const key = JSON.stringify(args);

    if (cache.has(key)) {
      console.log('캐시 히트');
      return structuredClone(cache.get(key));
    }

    const result = fn(...args);
    cache.set(key, structuredClone(result));
    return result;
  };
}

// 사용
const expensiveFunction = memoize((data) => {
  // 무거운 계산
  return data.map(x => x * 2);
});

const result1 = expensiveFunction([1, 2, 3]);
const result2 = expensiveFunction([1, 2, 3]);  // 캐시 히트

폼 데이터 핸들링​

import React, { useState } from 'react';

function ComplexForm() {
  const [formData, setFormData] = useState({
    personal: {
      name: '',
      email: '',
      phone: ''
    },
    address: {
      street: '',
      city: '',
      zipcode: ''
    },
    preferences: {
      newsletter: false,
      notifications: {
        email: true,
        sms: false
      }
    }
  });

  // 중첩 필드 업데이트
  const updateField = (path, value) => {
    setFormData(prev => {
      const newData = { ...prev };
      const keys = path.split('.');
      let current = newData;

      for (let i = 0; i < keys.length - 1; i++) {
        current[keys[i]] = { ...current[keys[i]] };
        current = current[keys[i]];
      }

      current[keys[keys.length - 1]] = value;
      return newData;
    });
  };

  // 또는 Immer 사용
  // const updateField = (path, value) => {
  //   setFormData(produce(draft => {
  //     const keys = path.split('.');
  //     let current = draft;
  //     for (let i = 0; i < keys.length - 1; i++) {
  //       current = current[keys[i]];
  //     }
  //     current[keys[keys.length - 1]] = value;
  //   }));
  // };

  return (
    <form>
      <input
        value={formData.personal.name}
        onChange={(e) => updateField('personal.name', e.target.value)}
        placeholder="이름"
      />

      <input
        value={formData.address.city}
        onChange={(e) => updateField('address.city', e.target.value)}
        placeholder="도시"
      />

      <label>
        <input
          type="checkbox"
          checked={formData.preferences.notifications.email}
          onChange={(e) =>
            updateField('preferences.notifications.email', e.target.checked)
          }
        />
        이메일 알림
      </label>
    </form>
  );
}

// 폼 리셋 (초기값 복사)
function FormWithReset() {
  const initialData = {
    username: '',
    email: '',
    settings: { theme: 'light' }
  };

  const [formData, setFormData] = useState(structuredClone(initialData));

  const handleReset = () => {
    setFormData(structuredClone(initialData));
  };

  return (
    <form>
      {/* ... 폼 필드들 ... */}
      <button type="button" onClick={handleReset}>
        초기화
      </button>
    </form>
  );
}

🤔 자주 묻는 질문​

Q1. 언제 얕은 복사를, 언제 깊은 복사를 사용하나요?​

A: 데이터 구조와 요구사항에 따라 선택합니다:

// 얕은 복사 사용 시기
const useShallowCopy = {
  단순객체: `
    // 중첩 없는 객체
    const person = { name: '철수', age: 25 };
    const copy = { ...person };  // OK!
  `,

  배열최상위: `
    // 배열 요소가 원시값
    const numbers = [1, 2, 3, 4, 5];
    const copy = [...numbers];  // OK!
  `,

  성능중요: `
    // 빈번한 복사가 필요한 경우
    const items = Array(10000).fill({ id: 1 });
    const copy = [...items];  // 빠름!
  `,

  React_Props: `
    // Props 전달 시
    <Child data={{ ...parentData }} />
    // 1단계만 복사하면 충분한 경우
  `
};

// 깊은 복사 사용 시기
const useDeepCopy = {
  중첩객체: `
    // 여러 단계 중첩
    const user = {
      name: '철수',
      address: {
        city: '서울',
        detail: { street: '강남대로' }
      }
    };
    const copy = structuredClone(user);  // 필수!
  `,

  배열중첩: `
    // 배열 안의 객체
    const users = [
      { id: 1, profile: { age: 25 } }
    ];
    const copy = structuredClone(users);
  `,

  완전독립: `
    // 원본과 완전히 독립적인 복사본
    const original = { data: { value: 1 } };
    const copy = structuredClone(original);

    copy.data.value = 2;
    // original.data.value는 1 유지
  `,

  Redux_State: `
    // Redux 같은 상태 관리
    const state = {
      user: { settings: { theme: 'dark' } }
    };

    // 불변성 유지 필요
    const newState = structuredClone(state);
  `
};

// 판단 기준
function shouldUseDeepCopy(obj) {
  // 1. 중첩 레벨 확인
  const hasNested = typeof obj === 'object' &&
    Object.values(obj).some(v => typeof v === 'object');

  if (!hasNested) {
    return false;  // 얕은 복사로 충분
  }

  // 2. 원본 보호 필요 여부
  const needsProtection = true;  // 비즈니스 로직

  // 3. 성능 vs 안전성
  const dataSize = JSON.stringify(obj).length;
  const isCritical = needsProtection && dataSize < 100000;

  return isCritical;
}

// 실전 예시
function processUserData(user) {
  // 단순 필드만 수정 → 얕은 복사
  if (onlyTopLevelChange) {
    return { ...user, name: 'Updated' };
  }

  // 중첩 필드 수정 → 깊은 복사
  if (nestedChange) {
    const copy = structuredClone(user);
    copy.settings.theme = 'dark';
    return copy;
  }
}

Q2. JSON 방법의 문제점은 무엇인가요?​

A: 특정 타입을 제대로 복사하지 못합니다:

// JSON 방법의 한계

const problematic = {
  // 1. 함수
  greet: function() {
    console.log('hi');
  },
  arrow: () => console.log('arrow'),

  // 2. undefined
  value: undefined,

  // 3. Symbol
  id: Symbol('id'),

  // 4. Date
  created: new Date('2024-01-01'),

  // 5. RegExp
  pattern: /test/gi,

  // 6. Map
  map: new Map([['key', 'value']]),

  // 7. Set
  set: new Set([1, 2, 3]),

  // 8. NaN, Infinity
  nan: NaN,
  infinity: Infinity,

  // 9. 순환 참조
  self: null
};
problematic.self = problematic;

// JSON 복사 시도
try {
  const copy = JSON.parse(JSON.stringify(problematic));

  console.log(copy.greet);     // undefined (함수 사라짐!)
  console.log(copy.arrow);     // undefined
  console.log(copy.value);     // undefined (키 자체가 사라짐)
  console.log(copy.id);        // undefined
  console.log(copy.created);   // "2024-01-01T00:00:00.000Z" (문자열!)
  console.log(copy.pattern);   // {} (빈 객체!)
  console.log(copy.map);       // {} (빈 객체!)
  console.log(copy.set);       // {} (빈 객체!)
  console.log(copy.nan);       // null (null로 변환!)
  console.log(copy.infinity);  // null
  // copy.self는 순환 참조 에러!
} catch (error) {
  console.error('순환 참조 에러:', error);
}

// ✅ 대안 1: structuredClone (권장)
const copy1 = structuredClone({
  created: new Date(),
  pattern: /test/,
  map: new Map(),
  set: new Set()
});

console.log(copy1.created instanceof Date);    // true
console.log(copy1.pattern instanceof RegExp);  // true
console.log(copy1.map instanceof Map);         // true
console.log(copy1.set instanceof Set);         // true

// ✅ 대안 2: 커스텀 deepClone
function customDeepClone(obj, map = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (map.has(obj)) {
    return map.get(obj);  // 순환 참조 처리
  }

  // Date
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }

  // RegExp
  if (obj instanceof RegExp) {
    return new RegExp(obj.source, obj.flags);
  }

  // Map
  if (obj instanceof Map) {
    const cloned = new Map();
    map.set(obj, cloned);
    obj.forEach((value, key) => {
      cloned.set(key, customDeepClone(value, map));
    });
    return cloned;
  }

  // Set
  if (obj instanceof Set) {
    const cloned = new Set();
    map.set(obj, cloned);
    obj.forEach(value => {
      cloned.add(customDeepClone(value, map));
    });
    return cloned;
  }

  // 배열
  if (Array.isArray(obj)) {
    const cloned = [];
    map.set(obj, cloned);
    obj.forEach((item, i) => {
      cloned[i] = customDeepClone(item, map);
    });
    return cloned;
  }

  // 일반 객체
  const cloned = {};
  map.set(obj, cloned);
  Object.keys(obj).forEach(key => {
    cloned[key] = customDeepClone(obj[key], map);
  });

  return cloned;
}

// 사용
const complex = {
  date: new Date(),
  map: new Map([['a', 1]]),
  self: null
};
complex.self = complex;

const cloned = customDeepClone(complex);
console.log(cloned.date instanceof Date);  // true
console.log(cloned.map instanceof Map);    // true
console.log(cloned.self === cloned);       // true (순환 참조 유지)

// 언제 JSON을 사용해도 될까?
const safeForJSON = {
  조건: [
    '함수 없음',
    'undefined 없음',
    'Symbol 없음',
    'Date를 문자열로 받아도 OK',
    'RegExp 없음',
    'Map/Set 없음',
    '순환 참조 없음'
  ],

  예시: `
    // 안전한 경우
    const config = {
      theme: 'dark',
      fontSize: 14,
      colors: {
        primary: '#000',
        secondary: '#fff'
      }
    };

    const copy = JSON.parse(JSON.stringify(config));
    // OK!
  `
};

Q3. 불변성(Immutability)이 왜 중요한가요?​

A: 예측 가능하고 버그를 줄이며 성능을 최적화할 수 있습니다:

// 불변성의 중요성

// 1. 예측 가능한 코드
function mutableExample() {
  const user = { name: '철수', age: 25 };

  // 어딘가에서 수정
  someFunction(user);

  // user가 변경되었을까? 알 수 없음!
  console.log(user);
}

function immutableExample() {
  const user = { name: '철수', age: 25 };

  // 새 객체 반환
  const updatedUser = someFunction({ ...user });

  // user는 그대로, updatedUser는 새 객체
  console.log(user);         // 원본 유지
  console.log(updatedUser);  // 새 객체
}

// 2. 버그 방지
const sharedState = {
  count: 0,
  items: []
};

function buggyFunction() {
  // 여러 곳에서 같은 객체 수정
  componentA(sharedState);
  componentB(sharedState);
  componentC(sharedState);

  // 누가 무엇을 바꿨는지 추적 불가!
  // 디버깅 지옥
}

function safeFunct() {
  const initialState = {
    count: 0,
    items: []
  };

  // 각자 복사본 사용
  const stateA = { ...initialState };
  const stateB = { ...initialState };
  const stateC = { ...initialState };

  // 독립적으로 동작
  // 디버깅 쉬움
}

// 3. React 성능 최적화
function Counter({ count }) {
  // React.memo로 최적화
  console.log('렌더링');

  return <div>Count: {count}</div>;
}

const MemoizedCounter = React.memo(Counter);

// ❌ 객체를 직접 수정
const obj = { count: 0 };
obj.count++;
<MemoizedCounter count={obj} />
// 같은 참조 → 리렌더링 안 됨!

// ✅ 새 객체 생성
const obj1 = { count: 0 };
const obj2 = { count: 1 };  // 새 객체
<MemoizedCounter count={obj2} />
// 다른 참조 → 리렌더링됨!

// 4. 시간 여행 디버깅
class StateHistory {
  constructor(initialState) {
    this.history = [initialState];
    this.currentIndex = 0;
  }

  update(newState) {
    // 불변성: 새 객체를 히스토리에 추가
    this.history = [
      ...this.history.slice(0, this.currentIndex + 1),
      newState
    ];
    this.currentIndex++;
  }

  undo() {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      return this.history[this.currentIndex];
    }
  }

  redo() {
    if (this.currentIndex < this.history.length - 1) {
      this.currentIndex++;
      return this.history[this.currentIndex];
    }
  }
}

// 사용
const history = new StateHistory({ count: 0 });

history.update({ count: 1 });
history.update({ count: 2 });
history.update({ count: 3 });

console.log(history.undo());  // { count: 2 }
console.log(history.undo());  // { count: 1 }
console.log(history.redo());  // { count: 2 }

// 5. 동시성 안전
// 가변 상태
let mutableCounter = 0;

async function incrementMutable() {
  const current = mutableCounter;
  await delay(10);
  mutableCounter = current + 1;  // Race Condition!
}

// 여러 번 호출
incrementMutable();
incrementMutable();
incrementMutable();
// 결과: 1 (예상: 3)

// 불변 상태
let immutableCounter = 0;

async function incrementImmutable() {
  return immutableCounter + 1;
}

// 안전하게 처리
Promise.all([
  incrementImmutable(),
  incrementImmutable(),
  incrementImmutable()
]).then(results => {
  immutableCounter = Math.max(...results);
  console.log(immutableCounter);  // 3 (정확!)
});

Q4. Immer 라이브러리는 어떻게 동작하나요?​

A: Proxy를 사용하여 불변 업데이트를 쉽게 만듭니다:

// Immer: 직접 수정하는 것처럼 보이지만 불변성 유지

// import { produce } from 'immer';

// ❌ 수동 불변 업데이트 (복잡)
const state = {
  user: {
    name: '철수',
    profile: {
      age: 25,
      address: {
        city: '서울'
      }
    }
  },
  posts: [
    { id: 1, title: '제목1' },
    { id: 2, title: '제목2' }
  ]
};

// 깊이 중첩된 필드 업데이트
const updated = {
  ...state,
  user: {
    ...state.user,
    profile: {
      ...state.user.profile,
      address: {
        ...state.user.profile.address,
        city: '부산'
      }
    }
  }
};

// ✅ Immer 사용 (간단!)
// const updated = produce(state, draft => {
//   draft.user.profile.address.city = '부산';
// });

// 동작 원리
function simpleProduce(baseState, recipe) {
  // 1. Proxy로 draft 생성
  const changes = {};
  const draft = new Proxy(baseState, {
    get(target, prop) {
      return target[prop];
    },
    set(target, prop, value) {
      changes[prop] = value;  // 변경사항 기록
      return true;
    }
  });

  // 2. recipe 실행 (draft 수정)
  recipe(draft);

  // 3. 새 객체 생성 (변경사항 적용)
  return { ...baseState, ...changes };
}

// 실전 사용 예시

// Redux Toolkit
// import { createSlice } from '@reduxjs/toolkit';
//
// const todosSlice = createSlice({
//   name: 'todos',
//   initialState: [],
//   reducers: {
//     addTodo: (state, action) => {
//       // Immer 내장: 직접 push 가능!
//       state.push(action.payload);
//     },
//     toggleTodo: (state, action) => {
//       const todo = state.find(t => t.id === action.payload);
//       if (todo) {
//         todo.completed = !todo.completed;
//       }
//     }
//   }
// });

// React useState
// import { useImmer } from 'use-immer';
//
// function Component() {
//   const [state, updateState] = useImmer({
//     user: { name: '', age: 0 },
//     items: []
//   });
//
//   const updateName = (name) => {
//     updateState(draft => {
//       draft.user.name = name;
//     });
//   };
//
//   const addItem = (item) => {
//     updateState(draft => {
//       draft.items.push(item);
//     });
//   };
// }

// 복잡한 업데이트
// const nextState = produce(currentState, draft => {
//   // 여러 작업을 한 번에
//   draft.user.name = '영희';
//   draft.posts.push({ id: 3, title: '새 글' });
//   draft.posts[0].title = '수정된 제목';
//
//   // 조건부 업데이트
//   if (draft.user.age < 20) {
//     draft.user.status = 'minor';
//   }
//
//   // 필터링
//   draft.posts = draft.posts.filter(p => p.id !== 2);
// });

// 성능 비교
const largeState = {
  items: Array(10000).fill({ value: 1 })
};

// 수동 업데이트
console.time('Manual');
const manual = {
  ...largeState,
  items: largeState.items.map((item, i) =>
    i === 5000 ? { ...item, value: 2 } : item
  )
};
console.timeEnd('Manual');  // ~5ms

// Immer
// console.time('Immer');
// const immer = produce(largeState, draft => {
//   draft.items[5000].value = 2;
// });
// console.timeEnd('Immer');  // ~10ms

// Immer는 약간 느리지만, 코드가 훨씬 간단!

Q5. 복사 성능을 최적화하려면?​

A: 필요한 만큼만 복사하고, 적절한 방법을 선택합니다:

// 복사 성능 최적화

// 1. 얕은 복사로 충분한 경우
const users = Array(10000).fill(null).map((_, i) => ({
  id: i,
  name: `User${i}`
}));

// ❌ 불필요한 깊은 복사
console.time('Deep');
const deepCopy = structuredClone(users);
console.timeEnd('Deep');  // ~50ms

// ✅ 얕은 복사로 충분
console.time('Shallow');
const shallowCopy = [...users];
console.timeEnd('Shallow');  // ~1ms

// 2. 부분 복사
const largeObject = {
  metadata: { /* 큰 데이터 */ },
  settings: { theme: 'dark' },
  cache: { /* 매우 큰 데이터 */ }
};

// ❌ 전체 복사
const fullCopy = structuredClone(largeObject);

// ✅ 필요한 부분만
const partialCopy = {
  ...largeObject,
  settings: { ...largeObject.settings }
};
// metadata와 cache는 참조 공유 (읽기만 함)

// 3. Copy-on-Write
class CopyOnWrite {
  constructor(data) {
    this.data = data;
    this.isDirty = false;
  }

  read(key) {
    return this.data[key];
  }

  write(key, value) {
    if (!this.isDirty) {
      // 첫 쓰기 시에만 복사
      this.data = { ...this.data };
      this.isDirty = true;
    }
    this.data[key] = value;
  }

  get() {
    return this.data;
  }
}

// 사용
const cow = new CopyOnWrite({ a: 1, b: 2 });
console.log(cow.read('a'));  // 1 (복사 안 함)
cow.write('a', 10);          // 이때 복사
cow.write('b', 20);          // 이미 복사됨

// 4. 구조적 공유 (Persistent Data Structures)
// Immutable.js 같은 라이브러리
// import { Map } from 'immutable';
//
// const map1 = Map({ a: 1, b: 2, c: 3 });
// const map2 = map1.set('b', 20);
//
// // map1과 map2는 대부분의 구조를 공유
// // 변경된 부분만 새로 생성
// // 메모리 효율적!

// 5. 메모이제이션
const memoizedCopy = (() => {
  const cache = new WeakMap();

  return function(obj) {
    if (cache.has(obj)) {
      console.log('캐시 히트');
      return cache.get(obj);
    }

    const copied = structuredClone(obj);
    cache.set(obj, copied);
    return copied;
  };
})();

const data = { x: 1, y: 2 };
const copy1 = memoizedCopy(data);  // 복사
const copy2 = memoizedCopy(data);  // 캐시 (빠름)

// 6. Lazy Copy
class LazyProxy {
  constructor(target) {
    this.target = target;
    this.copy = null;
  }

  get(key) {
    return (this.copy || this.target)[key];
  }

  set(key, value) {
    // 첫 수정 시 복사
    if (!this.copy) {
      this.copy = { ...this.target };
    }
    this.copy[key] = value;
  }

  finalize() {
    return this.copy || this.target;
  }
}

// 7. 벤치마크
function benchmark(fn, iterations = 1000) {
  const start = performance.now();

  for (let i = 0; i < iterations; i++) {
    fn();
  }

  const end = performance.now();
  return end - start;
}

const testData = { a: 1, b: { c: 2 } };

console.log('Spread:', benchmark(() => ({ ...testData })));
console.log('Assign:', benchmark(() => Object.assign({}, testData)));
console.log('JSON:', benchmark(() => JSON.parse(JSON.stringify(testData))));
console.log('structuredClone:', benchmark(() => structuredClone(testData)));

// 결과 (ms):
// Spread: ~5ms
// Assign: ~6ms
// JSON: ~15ms
// structuredClone: ~10ms

🎓 다음 단계​

얕은 복사와 깊은 복사를 이해했다면, 다음을 학습해보세요:

  1. 프로토타입이란? - JavaScript 객체 구조 이해하기
  2. 클로저란? - 클로저와 참조의 관계
  3. 동기 vs 비동기 - 비동기 코드에서의 복사

🎬 마무리​

얕은 복사와 깊은 복사는 JavaScript 개발의 필수 개념입니다:

  • 얕은 복사: 최상위 레벨만 복사, 빠르지만 중첩 객체는 참조 공유
  • 깊은 복사: 모든 레벨 복사, 느리지만 완전히 독립적
  • 방법: Spread, Object.assign (얕은), structuredClone, JSON (깊은)
  • 활용: React 불변성, Redux, 폼 핸들링, 캐싱

올바른 복사 방법을 선택하면 버그를 예방하고 성능을 최적화할 수 있습니다!