[React]useCallback

핸드폰 번호 인증을 위해 인증을 요청하면 타이머가 가는 코드를 구현했다.
 
useCallback()은 성능 최적화에 사용되는 hook함수로, 
첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다.

use add = useCallback(() => x+y, [x,y]); 

위와 같은 코드가 있다고 가정했을 때, x+y 값을 저장(memozation)해둔 뒤 x 혹은 y 값이 변경되기 전까지는 저장해둔 값을 사용한다.
 
useCallback에서의 두번째 인자에서는 배열, 빈 배열이 들어갈 수 있다.
물론 아무 값도 넣지 않은 모양새가 될 수는 있지만 이 경우 저장의 기능만 하고 불필요한 렌더링이 이루어질 수 있기 때문에 두번째 인자에 값을 넣어 불필요한 재 랜더링을 막는 것이 좋다.
 
빈 배열의 경우 useEffect의 두번째 배열이 빈 배열일 경우와 비슷하게 처음 랜더링 시에 한번 생성되고 그 이후에는 다시 생성되지 않는다.
 
이런 비슷한 부분 때문에 useEffect와 비슷한 거 아닌가?라는 생각이 들었지만
주로 함수 메모이제이션의 기능을 하고 랜더링 사이클 간의 동일한 함수를 재사용하는데 사용되는 useCallback과, 주로 부수 효과를 수행하고 컴포넌트 랜더링 이후에 비동기 작업을 수행하는데 사용되는 useEffect는 이와 같은 부분에서 차이점이 있었다.
 
 
useCallback을 사용하면 두 가지 부분에서 장점이 있다.

1. 성능 최적화 : 의존하고 있는 배열이 변경될 때만 함수가 재생성되므로 불필요한 렌더링이 방지된다.
2. 렌더링 사이클 간의 안정적인 함수 : usecallback을 지정하는 함수는 항상 동일한 함수를 참조하기 때문에 컴포넌트의 렌더링 사이클 간에 일관된 동작을 유지한다(컴포넌트가 의도대로 동작한다)

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

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

chat GPT가 알려준 예시이다

위의 경우 useCallback을 사용함으로써 count가 변경될때만 increment함수가 생성되도록 최적화 할 수 있다.
useCallback 함수가 없다면 랜더링 할 때마다 생성이 된다.

usecallback을 이용해서 전에 구현했던 검색기능(debounce을 이용한)을 최적화 시킬 수 있다.
아래와 같이 일정한 초 이후에 함수가 실행되도록 검색기능을 구현할 때, 값을 메모리제이션 해놓는다면 onChangeHandler 함수는 search가 변경될 때만 업데이트 되도록 할 수 있다

  const onChangeHandler = useCallback(
    debounceFunction((value) => {
      setSearch(value);
    }, 500),
    [search],
  );