React 불변성

React 불변성

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

js에서 원시 타입은 불변성을 가지고 있고 참조 타입은 그렇지 않다

• 원시타입 : boolean, string, number, ull, undefined, Symbol
• 참조타입 : Object, Array

원시타입 : 고정된크기로 call Stack 메모리에 저장, 실제 데이터가 변수에 할당
참조타입 : 데이터 크기가 정해지지 않고 CallStack 메모리에 저장, 데이터 값이 heap에 저장되며 변수에 heap 메모리의 주소 값이 할당.
- 배열에 대한 요소를 추가하거나 객체 속성의 값을 변경할 때 call Stack의 참조 id는 동일하게 유지되고 heap 메모리에서만 변경됩니다. 이렇게 불변성이 유지되지 않기 때문에 리액트를 통해 프로그램을 작성할때는 신경을 써 줘야한다.

불변성을 지켜야 하는 이유

1. 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있어서 복잡도가 올라갑니다.
2. 리엑트 화면을 업데이트할 때 불변성을 지켜서 값을 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트 하기 때문에 불변성을 지켜줘야 합니다.

불변성을 지키는 방법

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

sperad operator, map, filter, slice, reduce

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

const array = [1, 2, 3, 4]
const diifArray = [...array, 5]