#15 React - State(상태)가 불변성을 유지해야 하는 이유

오늘은 리액트 프로젝트를 할 때마다 헷갈렸던 개념을 정리해보려고 한다. 기초 개념이긴 하지만 복잡해질 땐 많이 복잡해질 수도 있는 개념이기 때문에!

0. 불변성 유지?

state가 불변성을 유지해야 한다는 것은 한 번 생성된 상태(state) 를 직접 수정하는 것이 아니라 상태를 변경할 때 새로운 값를 상태변화함수의 인자로 넣어서 업데이트해야 함을 의미한다. 특히 state가 객체일 때 새로운 배열을 생성해서 상태변화함수의 인자로 넣어서 업데이트해야 함을 의미한다.

즉, state의 값을 바꿀 때 이전 state(PrevState)와 다음 state(NextState)가 다른 참조를 가지고 있어야 한다. 그렇다면 불변성을 유지하지 않는다는 것은?

setState로 state값을 할당하는 것이 아닌 state 자체 값을 변경한다는 것! 1.

예시를 통해 알아보자 const [state, setstate] = useState([]); // 1. 불변성을 유지하지 않는 경우 : state...