렌더링 최적화 4탄: 다이어그램 편

다이어그램 뷰 렌더링 최적화

최적화 과정

1. 초기상태
   1. 상호작용 팝업이 나타날때도 팝업 상태가 바뀌면서 전체 컴포넌트들이 재렌더링 됨.
   2. 화면을 마우스로 붙잡고 이동시킬때 역시 오프셋 상태가 바뀌면서 전체 컴포넌트들이 재렌더링 됨.
   3. 선후관계 패스에 호버를 할때 안내 말풍선 외에 둘러싼 래퍼 컴포넌트가 함께 재렌더링됨.

2. React.memo로 props가 없을 때 TodoBlock 과 TodoVertex 렌더링 제거
   1. 자식 컴포넌트들을 모두 React.memo 로 감싸서 사용
   2. 내부서에서 사용해야하는 이벤트 핸들러 함수의 경우는 부모컴포넌트에서 생성 함수를 useCallback 사용해서 메모리에 저장하고, 생성함수를 자식 컴포넌트에게 넘겨서 자식이 자신을 위한 이벤트 핸들러를 만들어 사용하도록 함.
   3. 그 외에 반복적으로 재계산이 이루어지던 컴포넌트 내 값들을 useMemo로 보관

3. 팝업 메뉴의 이동시 재렌더링도 제거
   1. 팝업에도 React.memo 적용

4. 선후관계 패스의 마우스 호버 말풍선이 렌더될 때 부모 컴포넌트도 함께 렌더링되는 문제 해결
   1. Path 태그에 대한 정보를 상위 래퍼 컴포넌트에서 보관했으나, Path 스스로 상태로 보관하도록 변경해서 상위 컴포넌트의 재렌더링 제거

최종 결과

렌더링 범위

렌더링 범위가 매우 축소되었다! 클릭과 드래그시에 모든 컴포넌트가 다시 렌더링되는 현상이 사라지고, 상호작용이 일어날 때, 상호작용 당사자들만 재렌더링이 일어나게 되었다.

렌더링 시간 프로파일

개발자도구의 Profiler로 렌더 정보를 찍어보니 더 극명한 차이를 확인할 수 있었다. 10개의 Todo 기준 렌더시간이 3.3ms -> 0.5ms로 약 85%가량 감소했다. 마우스 가운데 버튼으로 다이어그램을 잡은 뒤 드래그하면, 이벤트 때마다 전체를 다 그리고 있었으니, 최적화하지 않았으면 연속적인 상호작용이 어려운 수준이 될 수도 있었을 것이다...