React 오래된 클로저(Stale Closure) 이슈 해결하기

 

📌 requestAnimationFrame + React Hook

트리플 사전과제에서 애니메이션을 구현할 때 rAF(requestAnimationFrame)을 사용했습니다.

CSS 만으로는 구현이 힘들다고 생각되어 사용한 API인데 React와 함께 사용하며

마주했던 이슈를 정리하려고 포스팅을 남기게 되었습니다.

 

📌 rAF를 사용한 slotMachine 구현부

 

해당 section 을 구현하는 것이 과제였다.

 

위 섹션에서 사용자 지표를 나타내는 숫자 부분의 증감 속도가

천천히 감소하는 애니메이션을 구현하기 위해 rAF를 사용했습니다.

구현 코드는 대략 다음과 같습니다.

해당 컴포넌트가 최초에 렌더링 될 때 애니메이션을 시작하기 위해 useEffect를 사용하였고

목표 숫자에 도달할 때까지 재귀적으로 애니메이션 함수를 실행합니다.

const SlotMachine = ({ startNumber, targetNumber, duration }) => {
    const [count, setCount] = useState(0)
    const animationId = useRef(0)    

    useEffect(() => {
        const increaseNumberAnimation = (timestamp: number) => {
            /** ✅ 목표 숫자에 도달할때까지 애니메이션을 반복합니다. */
            if (count < targetNumber) { 
                /** ✅ 다음 프레임에 보여줘야하는 숫자를 계산한 뒤 */
                const next = getNextFrameNumber(timestamp)

                /** ✅ 이 숫자를 상태값에 업데이트해서 화면을 다시 렌더링합니다. */            
                setCount(next)
                animationId.current = requestAnimationFrame(increaseNumberAnimation)
            }
        }

        animationId.current = requestAnimationFrame(increaseNumberAnimation)

        return () => cancelAnimationFrame(animationId.current)
    })

    return <data>{ count }</data>
}

하지만 위와 같이 구현하면 increaseNumberAnimation 함수가 무한정 호출되게 됩니다.

왜 이런 문제가 발생하는 것일까요?

 

📌 오래된 클로저(Stale Closure) 란?

오래된 클로저 (stale closure)는 React Hook을 사용할 때 빈번히 발생되는 이슈입니다.

이 현상이 발생하면 상태 값에 변화가 발생해도 이를 감지하지 못하고 예전 값을 바라보게 됩니다.

그렇다면 JavaScript 에서 꼭 등장하는 개념인 클로저란 무엇일까요?

 

클로저란 생명주기가 끝난 외부함수의 변수를 참조하는 함수를 의미합니다.

 

이제 위에서 발생한 문제의 원인을 살펴보겠습니다.

React의 useState는 상태 값을 count 라는 변수에 넘겨줍니다.

그리고 increaseNumberAnimation라는 함수가 초기화될 때 count 값을 참조하는데,

이때 변화된 count 값으로 increaseNumberAnimation 함수를 재할당하지 않으면

초기의 count 값인 0 을 계속 바라보고 있게 됩니다.

 

📌 Stale Closure 문제 해결하기

그렇다면 이 문제를 어떻게 해결할 수 있을까요?

제가 생각한 방법은 두 가지이며 상황에 따라 적절한 방법을 선택하면 됩니다.

1️⃣ useEffect에 의존성 알려주기

useEffect에 의존성 배열로 count를 전달하면 count의 변화를 감지해서

새로운 increaseNumberAnimation 함수를 생성할 수 있습니다.

useEffect(() => {
	const increaseNumberAnimation = (timestamp: number) => {
    	// ...
    }
    // ...
}, [count]) // <-- count 추가!

하지만 이렇게 하면 count 가 증가할때마다 requestAnimationFrame 함수와

cancelAnimationFrame 함수가 목표 숫자에 도달할 때까지 반복적으로 실행되기 때문에

성능상으로 문제가 될 수도 있을 것이라고 생각했습니다.

그래서 이번 경우에는 이 방법보다는 useRef 를 활용한 두 번째 방법을 사용했습니다.

 

2️⃣ useRef 를 이용해서 상태 값 관리하기

React 공식 가이드 문서에 보면 useRef 를 이용해서 컴포넌트의 지역변수와 같은 역할을

수행할 수 있다고 안내하고 있습니다.

useRef 의 반환 값은 변수의 참조값이기 때문에 참조값이 가리키는 변숫값을 업데이트하면

참조값은 변하지 않더라도 최신 값을 안전하게 가져올 수 있습니다.

이를 위해 현재 count 값을 저장하는 tick 을 선언합니다.

const SlotMachine = ({ startNumber, targetNumber, duration }) => {
    const [count, setCount] = useState(0)
    const animationId = useRef(0)    
    const tick = useRef(0)

    useEffect(() => {
        const increaseNumberAnimation = (timestamp: number) => {
            /** ✅ tick.current 로 조건 검사 */
            if (tick.current < targetNumber) { 

                const next = getNextFrameNumber(timestamp)

                /** ✅ 이 숫자를 상태값에 업데이트해서 화면을 다시 렌더링합니다. */            
                setCount(next)
                tick.current = next // <-- 추가!
                animationId.current = requestAnimationFrame(increaseNumberAnimation)
            }
        }

        // ...
    })

    return <data>{ count }</data>
}

 

📌 참고자료

Be Aware of Stale Closures when Using React Hooks

[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?

Things to understand in react "Stale Clousers".