React Native 기반 프로젝트 중 안드로이드 저사양 기기에서 마키(Marquee) 애니메이션이 여러 개 동시 실행될 경우, FPS가 급격히 저하되는 현상이 발생했습니다. 심지어 화면 전환 시에도 이전 화면이 완전히 언마운트되지 않아, 백그라운드에서 애니메이션이 계속 루프되며 JS Thread, UI Thread 모두에 부하가 걸리는 상황이 이어졌습니다.

문제 정리

Marquee 컴포넌트가 화면을 떠나도 계속 애니메이션을 수행함
FlatList나 Reanimated 기반 컴포넌트의 FPS가 눈에 띄게 하락
안드로이드 저사양 기기에서만 심함

해결 방향

화면을 벗어나면 애니메이션을 멈추거나 언마운트되도록 조치
필요 시 throttle 적용으로 프레임 제어

해결 방법

1. unmountOnBlur: true 설정으로 화면 벗어나면 언마운트

React Navigation의 Stack.Screen 옵션을 통해 해당 화면을 완전히 제거

<Stack.Screen
  name="TickerScreen"
  component={TickerScreen}
  options={{ unmountOnBlur: true }}
/>

2. useFocusEffect 로 화면 상태 따라 애니메이션 제어

기존 라이브러리는 외부에서 애니메이션을 중지(stop)할 수 있는 옵션을 제공하지 않아, 직접 커스텀 컴포넌트를 제작했습니다. 이를 통해 화면 포커스 여부에 따라 애니메이션을 켜고 끌 수 있도록 했습니다.

useFocusEffect(
  React.useCallback(() => {
    isActive.current = true;
    frameCallback.setActive(true);

    return () => {
      isActive.current = false;
      frameCallback.setActive(false);
      anim.value = 0; // 초기화
    };
  }, [])
);

3. useFrameCallback에 throttle 적용으로 프레임 최적화

프레임마다 무조건 갱신되는 방식은 JS Thread에 과부하를 주기 때문에, 프레임 갱신 주기를 조절하여 FPS를 안정화시켰습니다.

const throttleMs = 16; // 60FPS 기준

const frameCallback = useFrameCallback(frameInfo => {
  if (frameInfo.timeSincePreviousFrame === null) return;

  accumulatedTime.value += frameInfo.timeSincePreviousFrame;

  if (accumulatedTime.value < throttleMs) return;

  const frameDelta = frameRateMs
    ? accumulatedTime.value / frameRateMs
    : accumulatedTime.value / throttleMs;

  accumulatedTime.value = 0;

  if (reverse) {
    anim.value -= speed * frameDelta;
  } else {
    anim.value += speed * frameDelta;
  }
}, true);

결과

useFocusEffect로 애니메이션 중단 시점 명확화
unmountOnBlur로 화면 전환 시 컴포넌트 완전 제거
throttle로 JS Thread 부하 감소 및 프레임 드랍 방지
전체적으로 Android 저사양 기기에서도 부드러운 애니메이션 유지

참고

https://github.com/animate-react-native/marquee

기존 marquee 라이브러리 커스텀 및 성능 최적화