가격 그래프를 만들기 위해 div, SVG 혹은 Canvas 어떤 것을 사용해야 좋을까? - somedaycode/airbnb GitHub Wiki

목표: 사용자가 슬라이더를 이용해 가격 범위를 지정할 수 있는 차트 그래프를 만든다.

HOW: SVG를 활용

SVG 차트를 사용하여 가격 슬라이딩 그래프를 만들었다.

div 태그로 가격 차트 프로토타입을 만들어본 결과, 슬라이더 움직임에 따라 툭툭 끊기는 듯한 느낌을 지울 수 없었다.

이에 따라 polyline을 이용해 쉽게 선을 이을 수 있고 부드러운 움직임을 사용자에게 전달할 수 있는 SVG를 선택!

• useCallback을 사용하여 최적화에 신경을 써보았다.
• slider 두개를 겹쳐 최소가격과 최대가격을 선택할 수 있게 만들었다.
• 선택 범위는 배경을 바꾼다.

관련 코드 : https://github.com/somedaycode/airbnb/blob/dev-FE/fe/src/components/Header/PriceChart/Graph.tsx

관련 참고 링크 : https://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div