[💎React] 불변성

불변성

자바스크립트

자바스크립트에서 원시형 데이터(number, string ,boolean 등등)들은 모두 불변성을 유지한다.
불변성이란, 값이나 상태를 변경할 수 없는 것을 의미한다.

let a = 1
let b = a

원시형 데이터들은 복사가 이루어질 때 그 값 자체를 복사해서 새로운 메모리 주소에 할당한다.
a -> 0x0001(메모리주소):1(값)
b -> 0x0002(메모리주소):1(값)

설령 b=2라고 b의 값을 바꾸더라도, a의 값은 여전히 1이며,
b -> 0x0003(메모리주소):2(값)이렇게 새로운 메모리 주소에 새롭게 할당이 되는 것이다. 즉, 메모리 주소마다 할당된 값이 절대 변하지 않는 불변성이 유지되는 것이다.

그러나, 객체형 데이터들은 불변성을 유지하지 않는데, 예를 들어

let arr = [1,2,3]
let arr2= arr
arr2.push(4)

arr는 [1,2,3,4]가 나온다. arr에 아무런 수정을 하지 않았음에도 값이 변경된 이유는 객체형 데이터는 복사가 이루어질 때, 값을 복사하는 것이 아니라 메모리 주소를 복사하기 때문이다.

리액트

리액트는 기본적으로 state 등의 값이 변했는지 확인후, 실제로 변했다면 재렌더링하는 특성을 가지고 있다. 리액트 기준으로 값이 변했다라는 건, 메모리 주소 참조값이 변했는가(얕은 비교) 라는 의미이다. 그러므로 리액트에서 불변성을 유지하기 위한 방법으로는 push/ pop 같은 것들이 아닌,object.assign/filter/reduce/map등의 내장 함수를 사용해야 한다.

불변성 유지하며 배열 데이터 수정하기

데이터 추가

데이터 제거

데이터 수정