[TIL] 0629

yoon Y·2022년 6월 30일

2022 - TIL

목록 보기

102/109

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훅으로만 제어 가능.
클래스와 달리 로직을 기준으로 해당 로직을 어느 시점에 실행시킬 건지 설정 가능
- 로직을 관심사 별로 분리해서 관리할 수 있음.
- 코드가 중복되지 않음.
- 컴포넌트가 가벼워짐.