[TIL]React Hooks - useCallback

useCallback

개념

useCallback은 함수를 메모이제이션(memoization)하기 위해 사용되는 hook이다. 해당 함수는 2개의 인자를 받게 되는데 첫번째 인자는 넘어온 함수, 두번째인자는 의존성 배열을 받는다.

✨ 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산 반복을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

사용하는 이유?

리액트 컴포넌트 내에서 어떠한 함수가 선언 되어 있다면 이 함수는 컴포넌트가 렌더링 될때마다 새로운 함수를 생성하게 된다. useCallback을 사용하여 되면 컴포넌트가 렌더링 되더라도 기존 함수를 반환하게 된다. 브라우저는 컴포넌트 렌더링에 따라 함수를 새로 선언하는 것을 빠르게 처리하기 때문에 성능상 큰 문제가 되지 않아 단순히 함수를 반복해서 생성하지 않기 위해 useCallback 을 사용하는 것은 큰 의미가 없고 오히려 손해인 경우가 있다.

✨ 자바스크립트 함수 equality 이해하기

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

func1 === func2 //return false

자바스크립트에서 함수는 객체로 취급되기 때문에 바디 내에 동일한 코드를 가진 함수를 비교하여 되면 각각 함수가 참고하는 값에 의해 다르다는 결과를 반환한다. 이러한 특성 떄문에 리액트 컴포넌트 내에서 어떤 함수를 다른 함수의 인자로 넘기거나 자식 컴포넌트의 props으로 넘길때 예상치 못한 성능 문제가 일어 날 수 있다.

useCallback 적용하기

첫번째 인자로 저장할 함수, 두번째 인자로 의존성배열을 넣어준다. 첫번째 인자가 의존할게 없는 경우 빈배열을 넣어준다.

의존하는 상태값이 있는 경우 의존성 배열에 명시하여 넣어줘야한다.

export const UseRefPractice = () => {
  const [count, setCount] = useState(0);

  const countHandler = () => {
    setCount((prev) => prev + 1);
  };

  //clickHandler 함수는 count 상태값이 업데이트 될때마다 새로 생성된다.
  //useCallback hook을 사용하여 새로생성하지 않고 기존 함수를 사용하도록 해준다.
  const clickHandler = useCallback(() => console.log("clicked!"), []);

  return (
    <>
      <button onClick={countHandler}>{count}</button>
      <button onClick={clickHandler}>click here!</button>
    </>
  );
};

주의점

useCallback을 사용하기 위한 코드와 메모이제이션용 메모리가 추가로 필요하므로 컴포넌트 렌더링 최적화를 위해선 적절히 사용해야한다.