[React] 상태의 불변성이 중요한 이유

자바스크립트 엔진은 call stack과 heap memory 두가지 메모리 공간을 가지고 있다.

콜스택 : 실행중인 함수를 추적해 계산을 하고 지역변수를 저장하는 공간이다. 이곳에 원시 타입들이 저장된다.

힙 메모리 : 참조 타입들이 할당되는 곳이다. 메모리 누수를 방지하기위해 JS엔진의 메모리 관리자가 항상 관리하는 공간이다.

 

*참조타입이란 Object와 Array를 말한다.

*원시타입이란 Boolean, String, Number, null, undefined, Symbol등을 말한다.

 

원시타입과 참조타입의 데이터 저장방식과 재할당 비교

https://narup.tistory.com/268

원시타입 : 변수 a에 값 10을 저장하면 콜스택의 변수값에 10이 그대로 저장된다.

참조타입 : 변수 b,c,d에 객체와 배열을 저장할 경우 실제 값은 메모리 힙에 저장되고, 메모리의 힙의 주소가 콜스택의 값에 저장된다.

 

 

 

원시타입의 특징

https://narup.tistory.com/268

그림처럼 변수 a에 20을 재할당하고 변수 b에 30을 재할당 하는 경우 변수 a는 기존 콜스택에 20을 바라보고 변수 b는 새로운 주소에 값을 할당하여 30을 바라보게 한다. 이것이 불변성이다. 메모리 영역의 값은 변경되지 않는다. 이때 10은 가비지 컬렉터가 된다.

 

참조타입의 특징

https://narup.tistory.com/268

a에 100을 추가하거나 b에 200을 추가하는 경우 콜스택에 적힌 메모리 힙의 주소는 변하지 않는다. 오직 메모리 힙의 값만 변할 뿐이다. 따라서 불변성이 유지가 되지 않는다.

 

불변성을 지킨다는 의미는 메모리 영역에서 값을 변경할 수 없게 한다는 의미이다. 하지만 리액트는 콜스택의 주소값만 비교하여 상태변화를 감지하는데 이 경우 위의 참조타입의 변화를 감지할수 없다.

 

참조타입의 값만 변경되면서 state 변경이 감지되지 않아 리렌더링이 일어나지 않게 되는 것이다.

 

불변성은 어떻게 지킬수 있을까?

spread operator, map, filter, slice, reduce등 새로운 배열을 반환하는 메소드를 활용한다.

 

 

결론 : 리액트는 얕은 비교를 통해 상태 변화를 감지하기 때문에 불변성이 지켜지지 않으면 리렌더링이 일어나지 않게 된다.