[view] react-virtualized 도입을 위한 cluster graph, summary 단일화

[seungineer]

관련 이슈

#629

내용

• vertical-cluster-list에 두 개의 컨테이너가 존재함

• HTML Element는 위와 같음

현재 두 개의 세로 리스트로 구성된 vertical-cluster-list를 한 개의 세로 리스트로 구성되도록 수정하고자 합니다.

사유

현재와 같이 두 개의 세로 리스트 구성이라면 virtualized list도 두 개가 필요합니다. 스크롤 시 두 리스트가 동시에 움직일 수 있도록 scrollY 상태도 추가되어야 할 것입니다. 더 간단하게 이를 처리할 수 있는 아이디어 있으시면 의견 부탁드립니다. 🙌

즉, 기존 구조를 유지하며 virtualized list를 도입할 수 있습니다. 다만, scrollY 값을 두 virtualized list가 공유하는 조치가 부자연스럽고, 두 세로 리스트를 독립적으로 조작할 필요가 없는 UI이므로 두 세로 리스트로 단일화하여 virtualized list를 구현하고자 합니다.

참고

해당 라이브러리를 도입해 cluster-summary를 나타내면 DOM Element를 줄일 수 있는 것을 확인하였습니다.