React를 학습하면서 가장 많이 들었던 말 !
React에서 state의 값이 immutable 해야한다.
왜 그런지 이유를 알고 계신가요 ? 🥸
1. 왜 state값은 immutable해야 하죠?
흔히 React 컴포넌트의 state 를 변경해야 한다면 객체의 값을 직접적으로 수정하면 절대 안되고, 무조건 setState( ) 를 통해 state 를 업데이트 해주어야한다는것을 알고 있을 것이다.
만약, title이라는 변수가 있고 해당 array에 0번째 index에 '아무것도 먹고 싶지 않다'를 추가하고자 한다면?
우리는
'아무것도 먹고 싶지 않다'= title[0] 라고 state를 건드리지않고 shallow copy를 통해 복사하고 deep copy를 통해서(spread 사용) 새로운 변수를 만들어 복사한다.
왜 😳 ???????????
불변성을 지켜야하는 가장 큰 두가지 이유는 다음과 같다.
첫번째, side effects 방지 및 프로그래밍 구조의 단순성
primitive type은 원래 불변성 특징을 가지고 있지만 reference type의 경우 새로운 값을 변경할 때 원본 데이터가 변경이 된다. 이처럼 original data가 변경될 경우, 이 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있고 프로그래밍의 복잡도도 올라가게 된다.
| 참고 |
primitive type: Boolean, String, Number, null, undefined, Symbol
Reference type: Object, Array
두번째, 변경이 일어난 객체의 프로퍼티만 비교함으로써 React에서 최적화가 가능하다.
리액트에서 setState를 통해 상태값을 변경할 때 얕은 비교를 사용한다.
얕은 비교는 객체의 프로퍼티를 하나하나 다 비교하지 않고, 객체의 참조 주소값만 변경되었는지 확인하게 된다. 얕은 비교는 계산 리소스를 줄여주기 때문에 리액트는 효율적으로 상태를 업데이트 할 수 있게된다.
추가적으로 불변성을 가지지 않는 reference type의 경우에는 의도적으로 불변성을 지켜주어야하는데 이 때 새로운 주소 값을 가진 객체를 생성하여 상태를 업데이트 해준다.
우리가 가장 많이 썼떤 spread operator, map, filter, slice, reduce 메소드들이 그에 해당한다.
해당 포스트 참고>
https://dongkyun-jang.tistory.com/17
https://velopert.com/3640
https://velog.io/@bbio3o/React-%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%84-%EC%A7%80%EC%BC%9C%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0
