[TIL] 0302

WaffleCard Refactoring

CardList Animation 구현하기

css의 keyframe+translate 속성을 사용해 이동 애니메이션과 동시에 스크롤을 조작하기에는 한계라는 생각이 들었다
그래서 setTimeout을 이용해 시간이 지날 때마다 왼쪽으로 스크롤을 연속적으로 이동시키는 방법을 사용해야겠다고 생각했다

useInterval

setTimeout를 사용해 n초마다 스크롤을 이동시키는 방식으로 애니메이션을 구현했을 때 문제점이 setTimeout에 걸어주는 콜백함수가 상태를 변화시키는 로직이 들어가야해서 n초마다 렌더링이됐었다
(상태에 의존해야하는 이유는 클로저 문제 때문 - 처음 생성됐을 시점의 콜백함수에 선언된 변수값을 이용해 재실행하기 때문에 변수 값이 갱신되지 않음)
성능이 너무 안좋아서 그 방법은 포기했었는데 useInterval이라는 훅을 알게되었다
state가 아닌 ref를 이용해서 재렌더링을 방지해주기 때문에 렌더링이 과도하게 되는 문제는 피할 수 있었다
참고자료

Math.ceil

카드를 순환 시키기 위해선 스크롤의 중간 지점에 시작점으로 이동시키는 로직이 필요했는데
중간지점 인식이 안됐다.
원인을 알고봤더니 container.scrollLeft === container.scrollWidth/2의 조건이라고 했을 때, container.scrollWidth/2한 부분에서 소수점이 발생해 조건을 충족시키지 못했기 때문이다. Math.ceil(container.scrollWidth/2)을 해주어 해결했다