리액트 불변성 지키기

불변성이란?

값이나 상태를 변경할 수 없는 것을 의미한다.

---

기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call Staㅊk 메모리 공간을 사용 하지만 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용한다.

Call Stack은 개체 및 배열 갑싱 아닌 메모리에만 Heap 메모리 참조 ID를 값으로 지정한다.

원시 타입	참조 타입
불변성을 가지고 있음	불변성을 가지고 있지 않음
Boolean, String, Number, null, undefined, Symbol	Obeject, Array
고정된 크기로 Call Stack 메모리에 저장	데이터 크기가 정해지지 않고 Call Stack 메모리에 저장
실제 데이터가 변수에 할당	데이터 값이 Heap에 저장되면 변수에 Heap 메모리의 주소값이 할당

원시 타입

let userName = 'walter'     

    userName = 'john'

userName walter를 john으로 대체하지 않으며 메모리 영역 a에 있는 walter라는 값을 그대로 두고 메모리 영역 b에 john을 새로 할당.
(이렇게 불변성을 가지고 있기 때문에 리액트에서 불변성을 위해서 따로 신경 써주지 않아도 된다.)

참조 타입

let array = ['1', '2', '3']

    array = ['4', '5', '6']

배열데 대한 요소를 추가하거나 객체 속성 값을 변경할 때 Call Stack의 참조 ID는 동일하게 유지되고 Heap메모리에서만 변경.
(이렇게 불변성이 유지되지 않기 때문에 리액트에서 따로 신경을 써줘야 한다.)

불변성을 지켜야 하는 이유

1. 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있어서 프로그래밍의 복잡도가 올라간다.

2. 리액트에서 화면을 업데이트할 때 불변성을 지켜서 값을 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트하기 때문에 불변성을 지켜줘야하 한다.

불변성을 지키는 방법

참조 타입에서는 값을 바꿨을 때 Call Stack 주소 값은 같은데 Heap 메모리 값만 바꿔주기 때문에 불변성을 유지할 수 없으므로 아예 새로운 배열을 반환하는 메소드를 사용하면 된다.

spread operatio, map, filter, slice, reduce

원본 데이터를 변경하는 메소드 => splice, push

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

console.log(arrray === sameArray) // true

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