불변 자료구조
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
'프런트엔드 > 프로그래밍 언어' 카테고리의 다른 글
자바스크립트 언더스코어 의미 (1) | 2024.01.19 |
---|---|
자바스크립트 $ 의미 (0) | 2024.01.19 |
모노레포의 정의와 기본 원리 (0) | 2023.07.22 |
CSS 레이아웃 비교 - Float vs Flex vs Grid (0) | 2023.07.22 |
동시성과 병렬성 한 장에 정리 (0) | 2023.07.21 |