[Web] react setState callback parameter

setState({ ... }) 또는 setState((state) => { ...; return state; })와 같이 사용할 수 있다

<문제상황>

Component의 state에 Object를 저장하였다

그리고 그 Object(obj라고 가정하자)의 attribute 하나(data라고 가정하자)를 바꾸려고 한다

this.state.obj.data = ...

이렇게 다이렉트로 데이터를 바꾸고 나면, re-render가 이루어지지 않는다

(setState 함수를 사용했을 때와 달리)

그리고 아래에 코드를 한줄 추가했다

this.setState({}); // re-render

하지만 이러한 코드는 가독성이 떨어진다고 느껴서, re-render 기능만 하는 함수를 찾아보다가 아래 글을 찾게 되었다

<solution>

https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b

setState에 (state) => { /* ... */ return state; }

와 같은 콜백 파라미터를 사용할수 있다고 위 포스트에 설명되어있다

즉, setState 함수 안에서 obj.data 하나만을 수정할 수 있게 되었다

특정 문제상황에서 편리함이 느껴져 포스팅을 시작했으나, 잘못된 방법이었다

https://velopert.com/3486

프로젝트 규모가 커지게 되면, 위와같은 방식은 불필요한 CPU 리소스를 낭비하게 된다

그러므로 간단한 대안인 shouldComponentUpdate를 사용할 수 있다

shouldComponentUpdate(nextProps, nextState) { ... }

(위 링크의 포스트에는 prev로 오타가 났는데, nextProps, nextState가 맞다)

하지만 state를 직접 수정하고 warning과 함께해야하는 불편함이 있다

자세한 내용은 다른 블로그를 참고하자

----

필자가 react를 사용하는 이유는 생산성이다

그리고 위 내용은 성능에 대한 내용인데, 

생산성에 더 중점을 둔다면 성능은 속도가 체감될 때 최적화하는 것으로 미뤄두는 것이 좋다

성능에 너무 연연하지 말자