해당 글은 쏙쏙 들어오는 함수형 코딩 6, 7번 부분을 참조해서 작성하는 글입니다.
불변성이란(Imutability)? 변하지 않는 것.
자바스크립트에서 불변성을 유지시켜주기 위해서는 카피-온-라이트(copy-on-write)방식을 통해서 가능하다.
카피-온-라이트 원칙 세 단계
세 단계를 통해 불변성을 유지하면서 값을 바꿀 수 있다.
1. 복사본 만들기
2. 복사본 변경하기(원하는 만큼)
3. 복사본 리턴하기
function addElementLast(array, element) {
const newArray = array.slice(); // 1. 복사본 만들기
newArray.push(element); // 2. 복사본 바꾸기
return newArray; // 3. 복사본 리턴하기
}
위의 함수는 기존의 배열을 건들일까?
1. 배열을 복사했기 때문에 기존 배열은 변경되지 않는다.
2. 복사본은 함수 범위에 있기 때문에 다른 코드에서 값을 바꾸기위해 접근할 수 없다.
3. 복사본을 변경 후, 리턴을 통해 함수를 끝낸다. 이후에는 값을 바꿀 수 없다.
만약 데이터를 읽기도 하고, 변경도 하는 코드가 있다면 어떻게 바꿀 수 있을까?
const a = [1, 2, 3, 4];
const b = a.shift(); // 배열에 맨 앞에 있는 element를 빼는 메소드
console.log(b); // 1
console.log(a); //[2, 3, 4];
이럴 경우 각각을 함수로 분리 후, 함수에서 값을 두 개로 리턴을 한다.
//읽는 함수
function getFirstElement(array) {
return array[0];
}
//변경하는 함수
function dropFirst(array) {
const copyArray = array.slice();
copyArray.shift();
return copyArray;
}
만약 위의 두개의 함수를 합친다면 아래와 같은 한 함수가 될 수 있다.
function getShiftArray(array) {
const copyArray = array.slice();
const firstElement = array.shift();
return {
first,
array: copyArray,
}
}
불변 데이터 구조는 느릴까?
1. 언제든 최적화 할 수 있다.
- 앱을 개발할 때 예상하기 힘든 병목 지점이 항상 존재한다. 성능을 개선을 할때는 보통 미리 최적화하지 말라고 이야기 한다.
- 불변 데이터 구조를 사용하고 속도가 느린 부분이 있다면 그 때 최적화를 해도 괜찮다.
2. 가비지 콜렉터는 매우 빠르다.
- 가비지 콜렉터는 한두 개의 시스템 명령어로 메모리를 비울 만큼 최적화되어 있다.
- 생각보다 많이 복사하지 않는다.
3. copy-on-write는 얕은 복사(shallow copy)를 통해서 데이터 구조의 최상위 단계만을 복사하기 때문에 생각보다 많은 복사가 이뤄지지 않는다.
- 얕은복사란? 중첩된 데이터 구조에 최상위 데이터만 복사한다. 예를 들어 객체가 들어있는 배열이 있다면 얕은 복사는 배열만 복사하고 안에 있는 객체는 참조로 공유한다.
얕은복사와 구조적 공유

만약 라이브러리나 레거시 코드가 데이터를 변경한다면?
만약 만들고 있는 모든 코드가 불변성을 지키고 있는 상태에서, 라이브러리나 레거시코드가 섞여있다면 불변성을 지키면서 데이터를 주고받는 방법을 찾아야 한다.
1. 데이터가 안전한 코드에서 나갈 때 복사하기
- 변경 불가능한 데이터가 신뢰할 수 없는 코드로 나갈 때, 아래 단계로 원본 데이터를 보호할 수 있다.
- 1) 불변성 데이터를 위한 깊은 복사본을 만든다.
- 2) 깊은복사란(deep copy) 위에서 아래로 모든 계층에 있는 중첩된 데이터 구조를 복사한다.
2. 신뢰할 수 없는 코드로 복사본을 전달한다.
- 안전한 코드로 데이터가 들어올 때 복사하기
- 신뢰할 수 없는 코드에서 변경될 수도 있는 데이터가 들어온다면 다음 단계를 따른다.
- 1). 변경될 수도 있는 데이터가 들어오면 바로 깊은 복사본을 만들어 안전한 코드로 전달한다.
- 2). 복사본을 안전한 코드에서 사용한다.
| copy-on-write | deep copy | |
| 언제 쓰나요? | 통제할 수 있는 데이터를 바꿀 때 | 신뢰할 수 없는 코드와 데이터를 주고받을 때 |
| 어디서 쓰나요? | 불변성으로 만들 때 | 신뢰할 수 없는 데이터를 주고받는 곳에서 |
| 복사방식 | 얕은복사 | 깊은복사 |
'Frontend' 카테고리의 다른 글
| 프론트엔드 성능 최적화 - (Litghthouse 사용법) (0) | 2023.03.12 |
|---|---|
| Jest 및 테스팅 라이브러리로 React 테스트하기 (0) | 2023.01.09 |
| 프로그래머스 > 예상 대진표 (0) | 2022.10.29 |
| SWR이란? (0) | 2022.08.19 |
| MobX의 철학 (0) | 2022.07.27 |
