[React] 불변성

불변성?

let v = 1;
let v = 2;

원시타입인 Number는 이런식으로 선언될 수 있는데, 1을 2로 대체한 것이 아니라 메모리영역A에 있는 1이라는 값은 그대로 두고 메모리영역B에 있는 2로 새로 할당한 것이다. 이를 바꿔말하면 Number는 불변성을 가지고 있기 때문에 따로 신경쓰지 않아도 값이 변하지 않음을 알 수 있다.

let arr = [1, 2, 3]
let arr = [4, 5, 6]

참조타입인 Array 또한 이런식으로 선언이 가능한데, 참조타입은 Heap이라는 별도의 메모리공간에 따로 저장되며, 메모리주소만을 참조하고 있기 때문에 Heap에서 값이 [1, 2, 3]에서 [4, 5, 6]으로 바뀌더라도 그 값이 변했는지 변하지 않았는지 알수가 없다. 그렇기 때문에 참조타입은 불변성이 유지되지 않기 때문에 따로 신경써서 관리 해줘야한다.

불변성을 따로 신경써야 하는 이유?

리액트의 관점에서 봤을 때 불변성을 신경써야 하는 이유는 리액트의 특징과 관련이 있다. 리액트는 SPA를 만드는데 특화되어 있으며, 그것이 가능한 이유는 여러 페이지를 이동하는 것이 아닌, 하나의 페이지에서 리렌더링 될 때 변경된 내용만 화면에 업데이트하는 특징이 있다.

변경된 내용을 알기 위해서는 이전 값과 변경된 값을 비교해야하는데, 불변성을 신경쓰지 않는다면 이전 값이 명확하지 않기 때문에 불변성을 신경써서 관리해줘야 한다.

불변성을 지키는 방법

참조 타입에서는 값을 변경해도 Call Stack에서 알 수 없기 때문에 아예 새로운 참조타입을 반환하는 메소드를 사용해서 현재의 값을 남겨두는 방법을 사용하면 된다.
새로운 배열을 반환하는 메소드는 ..., map, filter, slice, reduce가 있고, 원본 데이터를 변경하는 메소드는 splice, push 등이 있으므로, 새로운 배열을 반환하는 메소드의 사용을 통해 불변성을 지킬 수 있다.

const array = [1, 2, 3, 4];
const sameArray = array; //
sameArray.push(5); // 원본데이터인 array를 변화시킴.

console.log(array === sameArray); // 결과값은 true

const array = [1, 2, 3, 4];
const differentArray = [...array, 5] // 확산연산자를 통해 새로운 배열을 반환
console.log(array === differentArray) // false