[React.js] Re rendering 조건

React의 장점 하면 무엇이 생각나는가?

 

내 생각으로는 React는 Virtual DOM을 이용해 초기 렌더링 되었을 때 DOM을 저장해놓고, 이 후 특정 값이 변경되었을 때 Virtual DOM에 적용 후 Virtual DOM에 있는 Render Tree를 Real DOM에 적용하여 Browser Rendering 연산 비용을 줄여주는 것이 제일 먼저 생각나지 않을까 싶다.

(사실 이 부분에 대해서는 제대로 이해한게 맞나? 라는 생각이 든다. Browser Redering 과정을 알고 있다면 어느정도 이해가 가는 부분이지만, 설명을 하기란 어려운 것 같다. 나중에 Browser Rendering 과정에 대해서도 따로 작성하도록 한다.)

 

그렇다면 특정 값이 변경되었을 때 Re rendering이 된다는 것은 알았으니 이제 어떤 값이 변경이 되어야지 Re rendering이 발생되는지를 알아보자.

 

1. Props의 변경
2. State의 변경
3. 부모 Component가 Rendering 되었을 때
4. forceUpdate(); 를 사용하였을 때

위 4가지 조건에 의해 Re rendering이 일어난다.

(이 내용은 추 후 성능 작업을 진행할 때 useMemo, useCallback과 같은 Hook을 쓸 때에도 나오는 개념이니 잘 이해하고 있어야 한다.)

 

한가지 더 알아둬야 할 점은 함수형 컴포넌트로 작성된 컴포넌트가 Re rendering이 될 때에는 내부에 선언된 변수 및 함수를 다시 생성 한다는 것을 알고 있으면 좋을 것 같다.