프런트엔드/프로그래밍 언어

불변 자료구조와 영속 자료구조

조드래곤나인 2023. 7. 22. 15:43

 

불변 자료구조
Immutable Data Structures

불변 자료 구조는 영원히 변하지 않는 상태를 말합니다.
변화가 필요할 때 새로운 상태를 만들어 내고 값을 변경합니다.

 

JSON 클론을 사용한 예시

const clone = obj => JSON.parse(JSON.stringify(obj))

const obj = {
  message: 'Hello World',
  inner: { count: 1 }
}
const clonedObj = clone(obj);

console.log(obj === clonedObj) // false
console.log(obj.inner === clonedObj.inner) // false
 

 

영속 자료 구조
Pesistent Data Structures

영속성은 상태를 제거하지 않고 보존하는 것을 의미합니다.

영속 자료 구조는 상태에 변화가 필요할 때 새로운 상태를 반환하지만

이전 상태를 계속 유지하고 있는 자료구조입니다.

다시 상태 변화가 필요한 시점에

이전에 만들었던 상태와 동일하면 이전 상태를 사용합니다.

 

영속 자료 구조를 사용하면 변화가 필요할 때

새로 만듦으로 메모리 효율성이 비교적 떨어지는

불변 자료구조의 단점을 보완할 수 있습니다.

 

 

immerJs을 사용한 예시

상태가 변경되어 객체를 새로 만들었지만
inner는 변경이 되지 않았기 때문에 기존 상태를 유지한다.

const obj = {
  message: 'Hello World',
  inner: { count: 1 }
}
const clonedObj = immer.produce(obj, (draft) => {
  draft.message = 'Hello'
})

console.log(obj === clonedObj) // false
console.log(obj.inner === clonedObj.inner) // true
 

 

 

728x90