[Javascript] Mutable vs Immutable 메서드 비교

React에서는 상태 변경이 컴포넌트의 리렌더링을 트리거하기 때문에, 상태 관리는 React 개발에서 핵심적인 부분이라고 할 수 있다.
그리고 React는 변경 사항을 쉽게 추적하고, React의 효율적인 렌더링 방식을 최대한 활용할 수 있게 하기 위해 불변성(immutability)을 유지하는 상태 관리를 권장한다.

하지만 JavaScript에는 상태를 변경하는 방법으로 mutable(변경 가능) 메서드와 immutable(불변) 메서드가 존재한다. 예기치 않은 부작용이나 버그를 예방하기 위해서는 두 메서드의 차이를 분명히 이해할 수 있어야 한다.

---

Mutable 메서드

Mutable 메서드는 원본 데이터를 직접 수정하여 변경된 데이터를 반환한다. 이 방법은 간단하지만, 상태 변화 추적이 어려워져 버그 발생 가능성이 높아진다. 또한 데이터 변경 의도가 명확하지 않아 코드의 가독성도 저하될 것이다.

---

Immutable 메서드

원본 데이터를 변경하지 않고, 수정된 새로운 데이터를 반환한다. 이를 통해 불변성을 유지하며, 상태 관리가 쉬워지고, 예측 가능한 코드 작성을 돕는다. 그리고 데이터 변경 흐름이 명확하여 디버깅이 쉽다.

---

Mutable vs Immutable

순번	특징	Mutable	Immutable
1	배열 추가	push	concat
2	배열 제거	pop	slice
3	배열 앞에 추가	unshift	[newItem, ...arr]
4	배열 앞에서 제거	shift	slice(1)
5	배열의 요소 변경	splice	slice + concat
6	배열 정렬	sort	Array.from + sort
7	배열 반전	reverse	slice().reverse()
8	배열 요소 제거	splice	filter
9	객체 속성 추가	직접 할당	Object.assign
10	객체 속성 제거	delete	Object.keys + reduce
11	객체 속성 변경	직접 할당	Object.assign
12	문자열 병합	직접 할당	concat