리액트 불변성 지키기

기본형 데이터에서는 불변성을 가지고 있어 리액트에서 따로 신경 써주지 않아도 된다.

하지만 참조형 데이터에서는 불변성이 유지되지 않기 때문에 리액트에서 따로 신경을 써주어야 한다.

( 자바스크립트 기본형 데이터와 참조형 데이터의 불변성 개념의 연장선 )


왜 리액트에서 불변성을 지켜주어야 할까?

1. 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기 때문에 이 원본 데이터를 참조하고 있는

    다른 객체에서 예상치 못한 오류가 발생할 수 있고 이에 따라 프로그래밍의 복잡도가 올라가게 된다.


2. 리액트에서 화면을 업데이트할 때 불변성을 지켜서 값을 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트 하기

    때문에 불변성을 지켜주어야 한다. ( + 사이드 이펙트 방지 )


불변성을 지키는 방법은?

참조 타입에서 값을 바꿨을때 Call Stack 영역 주소 값은 같은데 Heap 메모리 값만 바꿔주기에 불변성을 유지할 수 없으므로 아예 새로운 배열을 반환하는 메소드를 사용해야 한다.

spread operator
map
filter
slice
reduce
이 중 원본 데이터를 변경하는 메소드 => splice, push


정리하자면

리액트는 불변성을 지켜줌으로 효율적인 상태 업데이트를 하고,

사이드 이펙트를 사전에 방지, 프로그래밍의 구조를 단순하게 유지한다.

참조타입의 경우 의도적으로 불변성 지켜주어야 하며 새로운 배열을 반환하는 메소드 사용해 상태 업데이트