ProgressBar - ramonak

@ramonak/react-progress-bar

install

npm install @ramonak/react-progress-bar

import

import ProgressBar from "@ramonak/react-progress-bar";

animation

const [completed, setCompleted] = useState(0);

      useEffect(() => {
        const timeout = setTimeout(() => {
            setCompleted(testData[0].completed); 
        }, 20); 
    
        return () => clearTimeout(timeout); // 컴포넌트가 언마운트되거나 재렌더링될 때 타임아웃을 클리어
    }, []); // 처음 렌더링될 때만 실행

• completed : 상태 변수로 진행 막대의 진행상태
• 애니메이션 효과 : 'useEffect' 로 컴포넌트가 처음 렌더링 될 때만 애니메이션
• setTimeout : 20ms 후에 'setCompleted'함수 호출해 상태를 변경.

const testData = [
    { bgcolor: "white", completed: 8.3 },
    { bgcolor: "#00695c", completed: 16.6 },
    { bgcolor: "#ef6c00", completed: 24.8 },
    { bgcolor: "#ef6c00", completed: 33.1 },
    { bgcolor: "#ef6c00", completed: 41.4 },
    { bgcolor: "#ef6c00", completed: 49.7 },
    { bgcolor: "#ef6c00", completed: 58 },
    { bgcolor: "#ef6c00", completed: 66.3 },
    { bgcolor: "#ef6c00", completed: 74.6 },
    { bgcolor: "#ef6c00", completed: 82.9 },
    { bgcolor: "#ef6c00", completed: 91.2 },
    { bgcolor: "#ef6c00", completed: 99.5 },
];

export default testData;

• testData를 임포트해서 setTimeout 초기값을 testData[index].completed로 설정
• return 문에는 컴포넌트가 언마운트되거나 재렌더링될 때 setTimeout 타이머를 클리어하여 메모리 누수를 방지

프로그레스바 적용

<ProgressBar
    key={0}
    bgcolor={testData[0].bgcolor}
    completed={completed}/>

실제 화면