MUI

[Component] Bar Chart Slider 만들어보기

👋 개요 약 2년 전, 요구사항에 맞춰 Bar Chart 형태로 된 Slider Component를 제작한 적이 있다. 당시 부족했던 실력으로 만들었던 컴포넌트를 발전한 시점으로 리뷰와 동시에 제작 방법을 공유해보려한다. 해당 컴포넌트는 대표적인 데이터 시각화 라이브러리인 D3를 사용했으며 Range Slider의 기능을 직접 구현하기 보다는 Mui의 Slider Component를 사용했다. 💻 구현 차트 그려주기 먼저 UI에 보여줄 데이터를 D3를 이용해 Bar Chart로 시각화를 먼저 해주겠다. canvas element를 가지는 ref를 사용해도 되지만 handle 영역이과 chart영역을 분리해줄 거라 svg 하위에 g 태그를 두고 해당 element를 가지는 ref를 만들어주겠다. 데이터는 ..