🤔 why use setstate in react?

리액트를 공부하면서 class component에서 state를 사용하고 이 값을 변경하기 위해서 setState함수를 사용해야만 한다는 것을 배웠다. 하지만 왜 굳이 함수를 사용해서만 값을 변경해야하는지 생각해보라는 호영님의 숙제(?)를 받아서 알아보고 재밌어서 블로깅을 하려한다.

내가 생각했을때 setState함수를 사용하는 첫번째 이유는 새로운 state로 생성하고 React는 변경된 부분을 확인하고 변경된 부분을 찾아내서 다시 렌더링을 한다. 바닐라자바스크립트나 제이쿼리는 다시 렌더링이 될 수 있게 함수나 코드를 작성해야하지만 react는 자동적으로 변경된 부분을 찾아서 렌더링을 해주는 편리한 장점이 있다.

그리고 두번째 이유는 위의 설명처럼 react가 변경된 부분을 찾아서 변경을 해주는 과정에 대해 큰 장점이 있어서라고 생각한다. 리액트를 사용하다보면 렌더링은 react element tree를 만드는 것과 비슷하다. state나 props가 갱신되면 render() 함수는 새로운 React 엘리먼트 트리를 반환한다. 처음 렌더링 된 트리와 변경된 트리의 key props를 통해 어떤 자식 element가 변경되지 않아야 할지 확인해주고 직접 DOM에 접근해서 변경되야 할 부분만 찾아서 변경이 되어 시간 복잡도가 줄어드는 효과가 있다고 한다. 이 부분은 공식문서에서 확인을 했다.

공식문서와 아래의 출처에서 많은 도움을 받았고 알게된 것이 정답이 아닐 수 있습니다. 잘못된 부분이 있거나 추가적으로 코멘트가 있으신 분들의 댓글은 항상 환영입니다^^

react-lifecycle(추천받은 좋은 자료입니다.)
https://ssangq.netlify.app/posts/react-lifecycle

라이프사이클
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React의 탄생배경과 특징
https://medium.com/@RianCommunity/react%EC%9D%98-%ED%83%84%EC%83%9D%EB%B0%B0%EA%B2%BD%EA%B3%BC-%ED%8A%B9%EC%A7%95-4190d47a28f

stackOverflow
https://stackoverflow.com/questions/53098873/why-does-react-have-to-use-setstate-for-state-update