리액트에서 requestAnimationFrame 사용 시 주의할 점

리액트에서 requestAnimationFrame API를 사용하면서 겪었던 문제를 공유해 보려고 합니다.

 

📌 문제가 되었던 코드

function AnimationSection() {
    const [count, setCount] = useState(0);

    const text = 'welcome to ttaerrim world'.toUpperCase();
    const textRef = useRef<HTMLDivElement>(null);

    const animate = () => {  
      const width = textRef.current?.scrollWidth;  
      if (width) {  
        if (count > width) {  
          setCount(0);  
        } else {  
          setCount((c) => c + 10);  
        }  
      }  

      requestRef.current = requestAnimationFrame(animate);  
    };  
 
    useEffect(() => {  
      requestRef.current = requestAnimationFrame(animate);  
      return () => cancelAnimationFrame(requestRef.current);  
    }, []);
    
    // ... 생략
}

 

 

유튜브에서 본 맛있는 코딩님의 자바스크립트로 5분만에 텍스트 스크롤 애니메이션 효과(text marquee effect) 마스터하기를 보고 자바스크립트 예제를 리액트 코드로 작성하여 애니메이션을 동작하고 싶었습니다.

 

 

 

 

영상에서 설명하는 방식대로 element의 width가 count를 초과하게 되면 count를 0으로 변경하여 끊임없이 흐르는 것처럼 보이는 애니메이션을 만드는 것이 목표였으나 예상대로 동작하지 않았습니다.

 

 

 

 

이유는 useEffect 내에서는 사용하는 count 변수가 setCount로 변경하더라도 초기값 0에서 변경되지 않는 현상이 있었습니다.

그렇기 때문에 if문의 (count > width) 조건절을 탈 수 없었던 구조였습니다.

 

 

 

 

❓ useEffect가 이렇게 동작하는 이유는 무엇일까요?

 

useEffect의 두 번째 인자로 빈 배열을 전달하면 useEffect로 전달하는 콜백함수를 한 번만 실행할 수 있습니다.

그런데 이렇게 하면 애니메이션 중에 올바른 상태를 유지할 수 없습니다.

useEffect에 dependency로 빈 배열을 전달하는 것을 리액트는 상태를 최신으로 유지할 필요가 없다는 의미로 해석하기 때문입니다.

따라서 빈 배열을 dependecy로 가지는 useEffect 내에서 state의 값을 가져오면 항상 초기값에만 접근할 수 있습니다.

 

 

 

 

 

따라서 다음과 같이 애니메이션 코드를 수정했습니다.

 

function AnimationSection() {
  const [count, setCount] = useState(0);

  const text = 'welcome to ttaerrim world'.toUpperCase();
  const textRef = useRef<HTMLDivElement>(null);
  const requestRef = useRef<number>(0);
  const previousTimeRef = useRef<number>(0);

  const animate = (time: DOMHighResTimeStamp) => {
    const width = textRef.current?.scrollWidth;
    if (previousTimeRef.current !== undefined && width) {
      const deltaTime = Math.floor(time - previousTimeRef.current);
       setCount((prevCount) => (prevCount + deltaTime * 0.2) % width);
     }

     previousTimeRef.current = time;
     requestRef.current = requestAnimationFrame(animate);
  };

  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []);

  // 생략
}

 

 

useEffect 내에서는 state의 초기값을 가져오기 때문에 setCount 함수도 setCount((count + deltaTime * 0.2) % width)처럼 사용하면 늘 똑같은 값을 count로 지정하는 것과 같습니다.

최신의 상태 값을 사용하려면 setState로 함수를 넘겨 줍니다.

 

 

 

setState(prevState ⇒ prevState + value)

이런 식으로, 현재 상태를 기준으로 값을 전달하여 적용하면 상태 값이 변경됩니다.

 

 

 

애니메이션 동작에 사용되는 상태 값 중 값이 변경되더라도 렌더링시키지 않고 싶을 때가 있습니다. 이 경우에는 useRef를 사용합니다. useRef는 변경되더라도 렌더링에 영향을 미치지 않습니다.

애니메이션을 cleanup 할 때 계속 변경되는 reqeustAnimationFrame의 id를 저장해 두어야 하고, 경과된 시간을 기준으로 애니메이션을 적용하는 경우 타임스탬프를 기억해야 합니다. 이 두 변수를 useRef를 사용해 requestRef와 previousTimeRef에 저장해 사용했습니다.

 

 

 

 

 

 

📌 참고

Using requestAnimationFrame with React Hooks | CSS-Tricks - CSS-Tricks