불변성 지키기

불변성

불변성이랑 사전적 의미로는 값이나 상태를 변경할 수 없는 것을 의미함

 

 

자바스크립트 타입을 통한 분별성 의미

• 원시 타입은 불변성(immutable)을 가지고 있고 참조 타입은 그렇지 않음(mutable)
  • 원시 타입: Boolean, String, Number, null, undefined, symbol
  • 참조 타입: Object, Array

 

• 기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call stack 메모리 공간을 사용하지만 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용
• 이 경우 Call stack은 개체 및 배열 값이 아닌 메모리에만 Heap 메모리 참조 ID를 값으로 저장함

 

• 원시 타입: 고정된 크기로 Call stack 메모리에 저장, 실제 데이터 변수에 할당

let username = "walter";
username = "john";

/* 이것은 username walter를 john으로 대체한 것이 아닌 
메모리 영역 a에 있는 walter라는 값을 그대로 두고 메모리 영역 b에 john을 새로 할당한 것
*/

• 이렇게 불변성을 가지고 있기 때문에 리액트에서 불변성을 위해서 따로 신경써주지 않아도 됨

 

• 참조 타입: 데이터 크기가 정해지지 않고 Call stack 메모리에 저장, 데이터의 값이 Heap에 저장되며 변수에 Heap 메모리의 주소값이 할당

let array = ['1', '2', '3'];
array = ['4', '5', '6'];

/* 배열에 대한 요소를 추가하거나 객체 속성 값을 변경할 때
Call stack의 참조 ID는 동일하게 유지되고 Heap 메모리에서만 변경됨
*/

• 참조 타입은 불변성이 유지되지 않기 때문에 리액트에서 따로 신경을 써줘야 함

 

 

불변성을 지켜야 하는 이유

• 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있어 프로그래밍의 복잡도가 올라감
• 리액트에서 화면을 업데이트할 때 불변성을 지켜서 값을 이전 값과 비교해서 변경된 사항을 확인한 수 업데잉트하기 때문에 불변성을 지켜줘야 함

 

 

불변성을 지키는 방법

• 참조 타입에서는 값을 바꿨을 때 Call stack 주소 값은 같은데 Heap 메모리 값만 바꿔주기에 불변성을 유지할 수 없으므로 아예 새로운 배열을 반환하는 메소드를 사용하면 됨
• spread operator, map, filter, slice, reduce
• 원본 데이터를 변경하는 메소드 : splice, push

const array = [1, 2, 3, 4];
const sameArray = array;
sameArray.push(5);

console.log(array === sameArray);    // true


const array = [1, 2, 3, 4];
const differentArray = [...array, 5];
console.log(array === differentArray);    // false