🍎 리액트에서 불변성 왜 중요한가?

🌳 불변성 정의

한 번 생성된 원본 데이터는 변경시키지 않고, 데이터 변경 필요시 새로운 원본을 만드는 디자인 패턴

불변성 X → mutable
원본 데이터가 변할 수 있다는 의미 (push 메서드)

불변성 O → immutable
원본 데이터가 변할 수 없다는 의미 (map 메서드)

🌳 불변성의 중요성 / 문제점

문제점 1.
원본과 수정된 값의 주소값이 같으면 불변성이 유지 X → 렌더링 되지 X
리액트는 state 변경 전 후의 값을 얕은 비교하여 다른 경우에만 리렌더링
얕은 비교 → 참조 값의 경우 주소끼리 비교. 원시값은 데이터값 그 자체끼리 비교.

문제점 2.
Side Effect 부작용을 일으킬 수 있다.

객체의 내부에 데이터에 직접 변경을 가하는 방식으로 개발할 경우.
명령형 / 절차적 프로그래밍하게 되어 규모있는 프로젝트를 만들게 되면 유지보수가 어려워진 스파게티 코드를 보게될 확률이 높다.

불변성을 지키는 수단
-spread Operator

setObj({...obj, age:obj.age+1})

depth가 깊은 객체라면 다소 가독성이 떨어지고 복잡해 보임.

-불변성 지원 라이브러리(immer.js)
depth가 깊은 중첩 객체를 상태로 가질 경우, 불변성 여부를 점검하기 어려워지기 때문에, mutable한 문법으로도 불변성을 지킬 수 있는 immer 라이브러리를 사용을 권장.

setObj(produce(draftObj=>{draftObj.contact.email=newEmail;}))