lodash cloneDeep / 얕은 복사와 깊은 복사 (shallow, deep copy)

🌲 데이터 얕은 복사와 깊은 복사 (shallow, deep copy)

 

🚨 참조형 데이터를 새로운 변수에 할당 시 문제점

const user = { 
  name : 'kim', 
  age : 99, 
  email : 'siot@mail.com' 
}
const copyUser = user // 복사
console.log(copyUser === user) // true

user.age = 22
console.log('user', user.age) // user 22
console.log('copyUser', copyUser.age) // copyUser 22

메모리 주소를 참조하기 때문에 value값이 변경되면 주소를 참조한 데이터 모두 변경된다.

 

 

 

---

🚨 참조형 데이터 복사 방법

• 새로운 메모리 주소로 복사
• 전개연산자로 복사
• 얕은 복사 시 문제점
• 모든 데이터 복사방법 deep copy

 

 

✅ 새로운 메모리 주소로 복사

Object.assign({}, 출처객체)

assign메소드에서 대상객체에 빈 객체를 넣어 새로운 메모리 주소로 복사하는 방법

const user = { 
  name : 'kim', 
  age : 99, 
  emails : 'siot@mail.com' 
}
const copyUser = Object.assign({}, user)
console.log(copyUser === user) // false

user.age = 22
console.log('user', user.age) // 22
console.log('copyUser', copyUser.age) // 99

 

 

✅ 전개연산자를 활용

const user = { 
  name : 'kim', 
  age : 99, 
  emails : 'siot@mail.com' 
}
const copyUser = {...user} // 전개 연산자
console.log(copyUser === user) // false

user.age = 22
console.log('user', user) // 22
console.log('copyUser', copyUser) // 33

 

 

❎ 참조형 데이터의 얕은 복사 시 문제점

변수 user안에 배열데이터 emails는 복사되지 않는다. 껍데기만 복사되고 내부 내용(가변)은 참조되는 상황 발생

const user = { 
  name : 'kim', 
  age : 99, 
  emails : ['siot@mail.com']
}
const copyUser = {...user}
console.log(copyUser === user) // false

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

user.emails.push(('second@mail.com'))
console.log(user.emails === copyUser.emails) // true
console.log('user', user)
console.log('copyUser', copyUser)

 

 

✅ 모든 데이터 복사방법 (lodash패키지)

 

1. lodash 설치

npm i lodash

2. lodash import

import _ from 'lodash' // js파일은 확장자 생략 가능

 

3. lodash 재귀함수를 이용한 재귀적 값 복사  재귀링크  lodash의 cloneDeep 링크

*재귀 : 하나의 데이터 안에서 반복적으로 실행하며 모든 값을 복제

import _ from 'lodash'

const user = { 
  name : 'kim', 
  age : 99, 
  emails : ['siot@mail.com']
}
const copyUser = _.cloneDeep(user)
console.log(copyUser === user) // false

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

user.emails.push(('second@mail.com'))
console.log(user.emails === copyUser.emails) // false
console.log('user', user)
console.log('copyUser', copyUser)