React에서 불변성을 지키는 이유

React에서 상태값의 불변성을 지키기위해 [...arr, item] 이런식으로 spread Operator를 사용한다.
단순히 그렇구나 하고 넘어갔는데, 원리가 궁금해서 공부한 내용을 정리해봤다

우선 react에서는 state, props가 변경되거나 부모컴포넌트가 렌더링 될때 렌더링이 일어난다.
여기서 state값이 바뀌었는지 어떻게 알 수 있을까?

state = {
	name : 'ktw',
    age : '29',
    skill : {
    	move : 'fast',
        sing : 'hip',
        hobby : 'dance' 
        ...
    }
}

이런 상태값이 있다고 치자.
만약 이 값중에 state.skill.hobby만 바뀌었는데, 모든 속성(name, age,skill.move, skill.sing, skill.hobby)를 다 비교하면 매우 비효율적이다.

따라서 react는 이전객체와 현재객체를 얕은비교한다.

다만, 아래처럼 state값을 직접 바꾸면 value는 바뀌지만 참조값은 그대로다.
Call By Address를 생각하면 편하다

state.skill.hobby = swim
prevState === currentState // true (참조값은 같으므로 렌더링 X)

setState({...state, state.skill.hobby : 'swim'})
prevState === currentState // false (참조값이 바뀌어서 렌더링 O)

따라서 리액트에서 불변성을 강조하는 이유는 state객체의 참조값의 변화유무(얕은비교의 true, false값)에 따라 state가 바뀌었는지 판단을 하기때문에 state변화에 제대로 렌더링이 일어나게 하기위해선 불변성 유지가 필수다.