프로그래밍에서 불변성에 대해서 간혹 얘기가 나온다. 개발이 익숙지 않거나 컴퓨터 사이언스의 기본 지식이 부족한 상태라면 굉장히 막연한 말이기 때문에 이해하기 쉽지 않다.
네이버 국어사전에서 불변성에 대한 뜻을 찾아보았다.
변하지 아니하는 성질. 그래서 그게 뭔 말이야??😭
한국말이 더 어려운 것처럼 느껴지지만, 이 말의 뜻을 이해하려면 먼저 메모리에 저장되는 데이터의 성질을 알아야 한다.
원시 타입과 참조 타입
자바스크립트에서는 크게 원시 타입(Primitive type)과 참조 타입(Reference type)이라고 하는 두 가지 자료형이 존재한다.
원시 타입의 종류는
- Number
- Boolean
- null
- undifined
- String
이 다섯 가지가 존재하고,
참조 타입의 종류는
- Object
- Array
- function
이 세 가지가 존재한다.
원시 타입 데이터는 변수에 할당될 때 메모리상에 고정된 크기로 저장이 되고 해당 변수가 데이터의 값을 보관한다. 원시 타입 자료형은 변수가 선언, 초기화, 할당시 값이 저장된 메모리 영역에 직접 접근한다. 즉 변수에 새 값이 할당될 때 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다는 뜻이다.
하지만 자바스크립트에서 원시 타입은 선언된 변수의 값이 변경되면 그 메모리 안에 값을 바꾸는 게 아니라 새로운 메모리 주소를 할당해 저장한다는 말이다. 즉 "변한게 아니라 새로 만들어진 거다 그러므로 불변하다." 로 정리해볼 수 있다.
참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장한다. 참조하게 된 주소 값은 힙(Heap) 이라는 메모리를 가리키고 있고 그 공간에 값을 저장한다.
여기서 참조 타입의 값을 변경하게 되면 주소는 그대로 유지 되고 Heap에 저장된 값만 변경이 되기 때문에 가변한다고 표현할 수 있다.
Why??🧐🧐🧐
왜 이런 식으로 데이터의 저장 방식을 분리시켜놨을까?? 생각해보면 간단하다.자바스크립트에서 원시 타입이 불변한 이유는 대체로 적은 용량을 차지하는 경우가 대부분이지만 만약 큰 메모리를 차지하는 string 타입으로 변경했을 경우, 기존에 다른 메모리가 자리를 차지하고 있었다면 분단이 생기기 때문이다. 컴퓨터의 입장에서 데이터의 분단은 읽거나 쓸 때 상당히 많은 연산이 필요하므로 다른 곳에서 새로 만들어버리는 게 성능상의 이점이 더 많다고 판단했기 때문이라고 생각한다.
참조 타입은 대체적으로 데이터의 개수가 많다고 가정해야 하며 또 값이 계속 변하기 때문에 애초에 heap이라는 넑은 공간에서 활용하는 게 마음 편하기 때문이다.
리액트랑 불변성은 무슨 관계일까?
리액트는 state라는 메모리가 변했다고 판단이 되면 re-rendering을 하는 컨셉을 가지고 있다. 이때 주의해야 할 점은 state가 참조 타입의 데이터라면, 배열이 값으로 할당된 state를 업데이트하려 할 경우, 그 배열의 상태를 변경하지 않는 방법. 즉, 새로운 배열을 반환하는 방식을 사용해야 한다. 예를 들어, push 메서드는 원본 배열을 변경하게 되므로 setState 는 이전 state와 비교했을 때, 변경점이 없는 것으로 판단해 해당 사항에 대해 다시 렌더를 실행하지 않는다. 그래서 새 배열을 반환하는 방법을 사용해야 하는데, 대표적으로 concat 또는 ... spread 연산자를 사용하는 방법이 있다.
