렌더링 최적화 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 스스로 상태로 보관하도록 변경해서 상위 컴포넌트의 재렌더링 제거