function easeInQuad(i, minTime, maxTime, diff) {
return maxTime * (i /= diff) * i + minTime;
}
const counterAnimation = (maxNum, dom, Time, easing) => {
let time = 0;
let diff = maxNum;
let minTime = 0;
let maxTime = Time;
for (let i = 0, len = diff; i <= len; i++) {
(function(i) {
setTimeout(function() {
dom.innerText = i;
}, time);
})(i);
time = easing(i, minTime, maxTime, diff);
console.log(time);
}
}
counterAnimation(700, $count_1, 2000, easeInQuad); // 티안남
counterAnimation(21, $count_2, 2000, easeInQuad); // 티남
counterAnimation(470, $count_3, 2000, easeInQuad); // 티안남
문제점
diff의 크기에 비례해서 더 급격하게 그래프가 바뀌어야할 것 같은데..
easeInQuad방정식을 어떻게 수정해야 할 지 모르겠다.
클래스 컴포넌트
함수 컴포넌트
리액트는 객체지향, 함수형의 특징을 다 가지고 있다.
클래스 컴포넌트와 함수 컴포넌트의 차이는 패러다임과 관련 없다.
클래스 불편함과 비효율적인 부분들을 함수로 대체해 가볍고 편하게 사용하기 위해 훅이 나타난 것.
참고자료
https://ko.reactjs.org/docs/hooks-effect.html
https://thewavelet.tistory.com/36
https://gyuwon.github.io/blog/2020/07/24/react-has-no-functional-components.html