[ React ] state 를 직접 수정하지 않고 setState 를 사용하는 이유

왜 State 를 직접 수정하면 안되는 걸까?

immutable ( 불변성 ) 을 유지해야하기 때문이다.

리액트 컴포넌트는 한번 Render 를 실행한 후, shouldComponentUpdate 상태로 들어가게 된다.

이 라이프 사이클 메서드를 사용하게 되면 아래 상태가 되었을때 Update 가 되어서 render 를 실행한다.

1. props, state 가 변경
2. 부모 컴포넌트가 렌더링 되었을 때
3. forceUpdate 가 실행될 때

그런데 직접 state 를 고치면 왜 update 상태가 되지 않는 것일까?

그건 React 가 값이 바뀜을 판단하는 기준이 메모리 주소이기 때문에 객체의 주소가 바뀌지 않고 내부 값만 바뀐다면 바뀌지 않은 것으로 인식하기 때문이다. 즉 "불변성" 을 지키지 않아서 일어난 일이다.

그래서 setState 함수를 사용해서 state 를 변경해야 하지만, setState가 가진 비동기성 때문에 다른 라이브러리를 써서 상태 업데이트를 하는 것이, 좋다고 한다. MobX 같은 상태관리 라이브러리를 추천하는 편이다.

SetState 의 비동기적 특징

setState는 비동기적으로 움직이며, state 값이 변할때마다 컴포넌트가 render 되기 때문에 setState 함수가 비동기적 동작 후, 로직을 전부 일괄처리 하기 때문에 마지막 함수만 실행되는 것처럼 동작한다.

만약 연속된 setState 로 값을 처리해야 하는 상황이 생기면 인자로 값이 아닌 함수를 넣어주면 모든 State 의 변화가 render 가 된다.

 

 

 

Reference

• https://brunch.co.kr/@hee072794/108
• [github]setState가 비동기적으로 설계된 이유
• https://www.codeit.kr/community/threads/36630