숨참고 개발다이브

이런 식으로 생긴 원형 Progress는 자주 사용되는 디자인 요소 중 하나이다. 이런 프로그래스 컴포넌트를 라이브러리가 아닌, 직접 커스텀할 수 있는 컴포넌트로 생성해 보았다. 게시글에 올라가는 코드는 React 프로젝트이지만, 애니메이션 부분을 React Native에서 제공하는 Animated를 활용하여 Path 컴포넌트에 애니메이션을 적용하면 동일하게 작동된다. 전체 코드의 완성본은 다음과 같다. 반지름과 수치를 조절할 수 있는 range bar를 태그를 활용해 생성하였고, react-color라는 괜찮은 라이브러리가 있어 색상 피커도 추가해보았다. 포스팅에서는 가장 중요한 CircleProgress 컴포넌트에 대해서만 설명하도록 한다. CircleProgress.tsximport { animat..