useCallback 컴포넌트 성능 최적화

useCallback은 useMemo를 기반으로 만들어져서 비슷한 점을 가진 hooks다.

useMemo는 특정 결과값을 재사용할 때 사용하고 useCallback은 특정 함수를 재사용할 때 사용한다.

 

useCallback을 사용할 때 함수 안에서 사용하는 state, props가 있다면,

반드시 deps 배열 안에 포함시켜야 한다.

그리고 컴포넌트에서 props로 함수를 받아왔다면 그 함수도 deps에 포함시켜야 한다.

 

함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야 한다.

그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다.

 

useCallback은 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다.

함수가 새로 만들어지는 것이 성능을 떨어뜨리지 않지만,

컴포넌트 결과물을 재사용하거나 하는 최적화 작업을 할 때 함수를 재사용하는것이 필요하다.

 

useCallback 사용법

 

기본형태 : 

useCallback( function, deps )

-function : 재사용 할 함수

-deps : 검사할 특정 값을 담은 배열

( 배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다

함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행한다. )

 

import React, { useCallback, useState } from 'react';

const App = () => {

  const [number, setNumber] = useState(0);

  const create = useCallback(() => {
    setNumber(number+1);
    console.log(number);
  }, [number]);

    return (
        <div>
          <button onClick={create}>증가</button>
        </div>
    )
}

export default App