React Hooks: Usecallback_무한 루프 문제

함수 메모리이제이션

useCallback()은 함수를 메모리제이션(memorization)하기 위해서 사용되는 hook 함수이다.

첫 번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있다.

const memoizedCallback = useCallback(callbackFunc, []);

useCallback을 사용하지 않고, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 랜더링될 때마다

자바스크립트의 특성 상 새로운 함수를 생성한다.

 

자바스크립트 객체의 참조값 비교_함수 동등성

func1 = () => x + y;
func2 = () => x + y;

console.log(func1 === func2) //false

객체는 원시값과는 다르게 참조값(메모리에 할당된 주소값)에 따른 비교를 한다. 

중요한 것은 자바스크립트 상에서 함수는 일급 객체로서 취급된다.

일급 객체는 다음과 같은 특성을 지니고 있다.

무명의 리터럴로 생성 가능(런타임에 생성 가능)
변수나 자료구조(객체, 배열 등)에 저장 가능
함수의 매개변수에 전달 가능
함수의 반환값을 사용 가능

이러한 자바스크립트 특성은 React 컴포넌트 함수 내에서 어떤 함수를 다른 함수의 인자로 넘기거나 자식 컴포넌트의 props으로 넘길 때

예상치 못한 성능 문제를 야기할 수 있다.

 

의존 배열로 함수를 넘길 경우

useEffect(() => {
        quillInstance.current = new Quill(quillElement.current, {
        
            (....)

        const quill = quillInstance.current;
        quill.on('text-change', (delta, oldDelta, source) => {
            if(source === 'user') {
                onChangeField({key: 'body', value: quill.root.innerHTML})
            }
        })
    }, [onChangeField]);

const onChangeField = useCallback(payload => dispatch(changeField(payload)), [dispatch]);

다음과 같이  컴포넌트에서 리덕스의 액션 생성 함수를 dispatch() 하는 함수를 호출하고자 할 경우, onChangeField 함수가 변경될 때만

호출이 된다.

 

여기서 onChangeField 함수를 useCallback으로 감싸지 않은 채, 그대로 자식 컴포넌트에 props로 넘겨주고 의존성 배열에 할당하게 된된다면, 자바스크립트는 함수의 동등성을 판단하는 방식이 참조값에 의한 비교이기 때문에 예상치 못한 무한 루프 문제가 발생하게 된다.

 

onChangeField는 함수이기 때문에, 컴포넌트가 랜더링될 때마다 새로운 참조값으로 변경이 된다.

그러면 useEffect() 함수가 호출되어 액션 생성 함수를 dispatch 하게 되고 리덕스 내에 state의 값이 변경됨에 따라 다시 랜더링이 일어나고 그럼 또 다시 useEffect 함수가 호출되는 악순환이 반복된다.

 

이러한 무한 루프를 방지하기 위해서 자식 컴포넌트에 함수를 props로 넘길 경우에는 반드시 useCallback으로 해당 함수를 감싸줘야 한다.