React 불변성

1. 불변성이란?

불변성은 값이나 상태를 변경할 수 없는 것을 의미합니다

원시타입? 참조타입?

원시타입은 불변성을 가지고있음 그렇다면 원시타입은 값을 변경할 수 없는 것일까요?

let string ='hello'

string='bye'

위 예제를 실행해보면 string의 변수 값은 hello 에서 bye로 변경되었습니다.

그런데 자세하게 살펴보면 실제 메모리 영역에서는 hello, bye값 둘 다 존재합니다

위 예시에서는 메모리 영역을 총 2개 사용 기존 string은 hello였고 bye를 재할당했는데 기존 메모리 영역에 있는 hello값은 그대로 두고 새로운 메모리 영역에 bye를 새로 할당했습니다

즉 메모리 영역에서 ‘bye’는 ‘hello’를 대체하는 것이 아니라 새로운 영역에 할당됩니다.

이것이 불변성입니다.

let arr = [1, 2, 3] // 메모리 영역1
arr.push(4) // 메모리 영역 1

arr = [1, 2, 3, 4, 5] // 메모리 영역2

위 코드를 보면 arr.push(4)는 원본데이터를 수정함으로 불변성을 지켜주지 않은 것이되고,

arr=[1, 2, 3, 4, 5]는 새로운 배열을 할당하고 새로운 참조값을 만들어주어 불변성을 지켜준 것이됩니.

즉 불변성의 진짜 의미는 메모리 영역에서 값을 변경할 수 없다는 의미입니다.

리액트에서 불변성을 지키는 이유

리액트가 상태를 업데이트는 하는 원리는 상태값을 업데이트 할 때 얕은 비교를 수행하기때문입니다..

즉 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지.

이런 이유로 배열이나 객체를 업데이트할때 setState([...state, newState]) 이런식으로 배열이나 객체를 새로 생성해서 새로운 참조값을 만들어 상태를 업데이트합니다.

이런 행위가 불변성을 지켜주는 것. 불변성을 지켜줌으로써 얻게되는 또 다른 이점은 사이드 이펙트를 방지합니다.

즉 외부에 존재하는 원본데이터를 직접 수정하지 않고 원본데이터의 복사본을 만들어서 값을 사용하기에 예상치 못한 오류를 사전에 방지할 수 있습니다 즉 외부의 값을 함부로 변경할 수 있는 것은 위험한 일이고 만약 다른 어떤 곳에서 원본데이터를 사용하고 있다면 어플리케이션 어딘가에서 사이드 이펙트가 일어날 가능성이 있습니다. 결국 리액트에서는 불변성을 지킴으로 인해 효과적인 상태 업데이트와 사이드 이펙트를 방지하는 이점을 얻고있습니다.

1. 효율적인 상태 업데이트 (얕은 비교 수행)

얕은 비교란 객체의 프로퍼티 하나하나 다 비교하지 않고, 객체의 참조 주소값만 변경되었는지 확인. 얕은 비교는 계산 리소스를 줄여주기 때문에 리액트는 효율적으로 상태를 업데이트 할 수 있습니다.

1. 사이드 이펙트 방지 및 프로그래밍 구조의 단순성.
2. 원시타입은 애시당초 불변성 특징을 가지고 있지만 참조타입인 객체나 배열의 경우 새로운 값을 변경할 때 원본 데이터가 변경됨(불변성이 지켜지지 않음). 이렇게 원본 데이터가 변경될 경우 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있습니다.