🤔 리액트에서 상태의 불변성이 중요한 이유는 무엇인가요?
상태를 효율적으로 업데이트하기 위함
리액트에서 상태의 불변성을 지켜야하는 이유는 리액트가 상태를 업데이트하는 원리 때문이다.
리액트는 내부적으로 UI를 최신화하기 위해 비용이 많이 드는 DOM 작업의 수를 최소화 하기위해 성능 최적화를 진행한다.
컴포넌트의 prop이나 state가 변경되면 리액트는 새로 반환된 엘리먼트를 이전에 렌더링된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정한다. 같지 않을 경우 리액트는 DOM을 업데이트 한다.
여기서 렌더링이란, 컴포넌트의 현재 props와 state에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다.
하지만 렌더링이 항상 UI 업데이트를 의미하는 것은 아니다.
리액트에서는 값 자체가 아닌 참조값을 비교(얕은 비교)하므로 참조값이 이전과 동일하면, 상태의 변화를 감지할 수 없다.
얕은 비교는 계산 리소스를 줄여주기 때문에 효율적인 상태 업데이트가 가능하다. 불변성이 없다면 모든 자식 상태 트리를 깊은 비교(deep compare)해야 하므로 비용이 많이 든다.
이러한 이유로 상태를 업데이트할 때 새로운 참조값을 가진 배열이나 객체를 생성하여 불변성을 지켜줌으로써 리액트는 상태 변화를 감지할 수 있다.
const [info, setInfo] = useState({ id: 1, name: 'kim' });
setState({...info, id: 1004});예측 가능성
원본 데이터가 훼손될 경우 예기치 못한 변경을 발생시켜 사이드 이펙트를 유발하고 버그가 발생할 가능성이 존재한다. 프로그래밍의 복잡도 또한 올라간다.
반면에 불변성을 지킬경우 의도치 않은 변경 없이 애플리케이션 아키텍처를 단순하게 유지할 수 있어 보다 쉽게 예측 가능하다.
또한 불변성을 지킴으로써 변경이 발생했는지 여부를 매번 관찰하지 않고, 실제 변경이 발생한 경우만 쉽게 감지할 수 있다. 즉, 불필요한 관찰을 수행할 필요가 없다. 이는 곧 애플리케이션 최적화에도 도움이 된다.
