easing 효과가 적용된 숫자 증가 애니메이션 구현하기

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); // 티안남

문제점

  • easing효과가 나긴하지만 diff가 작은 숫자일 때만 티가 남.
  • 숫자가 커지면 티가 나지 않게됨.

diff의 크기에 비례해서 더 급격하게 그래프가 바뀌어야할 것 같은데..
easeInQuad방정식을 어떻게 수정해야 할 지 모르겠다.




리액트 컴포넌트와 패러다임

리액트 클래스 컴포넌트와 함수 컴포넌트의 차이

클래스 컴포넌트

  • React.Component에서 공통 메소드들을 상속받아 사용
  • 라이프 사이클도 포함
  • 각 LifeCycle 메소드에 모든 로직을 집어넣었어야 했음
    • 한 메소드 안에 관심사가 다른 로직들이 관리되므로 유지보수가 어렵다.
    • 코드를 각 LifeCycle 메소드에 중복으로 적어줘야하는 문제

함수 컴포넌트

  • 컴포넌트를 함수로 생성
  • 공통적으로 사용해야하는 로직들을 함수로 불러와 사용하게 함
    • useEffect, setState..
  • LifeCycle을 useEffect훅으로만 제어 가능.
  • 클래스와 달리 로직을 기준으로 해당 로직을 어느 시점에 실행시킬 건지 설정 가능
    • 로직을 관심사 별로 분리해서 관리할 수 있음.
    • 코드가 중복되지 않음.
    • 컴포넌트가 가벼워짐.

리액트의 함수 컴포넌트는 함수형이다?

  • 공식 문서에도 ‘함수형 컴포넌트’라는 말은 없지만 ‘함수 컴포넌트(function component)’라고 설명한다.
  • 함수 컴포넌트는 구현에 따라 순수하거나 순수하지 않을 수 있다.
    • 대표적인 부수 효과 예시로 useEffect사용을 들 수 있음.

리액트는 객체 지향? 함수형?

  • 리액트는 클래스형 컴포넌트 사용 시에 React.Component를 상속하는 것 말고는
    컴포넌트 조합 시 상속이 아닌 합성을 이용한다. -> 부분적으로만 객체지향을 사용하는 듯.
  • 불변성 유지, 선언형 방식이라는 점에서 함수형의 성격도 가지고 있는 것 같다.

리액트는 객체지향, 함수형의 특징을 다 가지고 있다.
클래스 컴포넌트와 함수 컴포넌트의 차이는 패러다임과 관련 없다.
클래스 불편함과 비효율적인 부분들을 함수로 대체해 가볍고 편하게 사용하기 위해 훅이 나타난 것.


참고자료
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

profile
#프론트엔드

0개의 댓글