[React] useMemo, useCallback 성능 최적화를 위한 hooks

useMemo와 useCallback 모두 리랜더링될 때 다시 실행하지 않아도 되는 함수를 기억하고 재사용하기 위해 사용된다. 때문에 리랜더링 중 연산을 줄여주어 성능을 최적화할 수 있다.

useMemo(함수, [deps 배열]);
useCallback(함수, [deps 배열]);

👀 useMemo

• useMemo는 함수의 return값을 재사용하기 위한 hooks이다.
• useMemo(함수, [여기있는 값이 바뀌면 다시실행])  : 첫번째 인자로 담은 함수를 실행하고 리턴 값을 기억해둔다. deps배열에 담긴 값이 바뀌기 전까지만 기억한다.

// 랜더링 될 때마다 아래를 실행하지만, lottoNumbers 값을 매번 바꾸고 싶지는 않다.
const lottoNumbers = useMemo(() => getWinNumbers(), []);
const [winNumbers, setWinNumbers] = useState(lottoNumbers);

👀 useCallback

• useCallback은 특정 함수를 새로 만들지 않고 재사용할 때 사용한다.
• useCallback(함수, [여기있는 값이 바뀌면 다시실행])
• 함수를 자체를 기억하고 있어서 리랜더링될 때, 함수가 다시 선언되지 않는다.
• 자식 컴포넌트에 props값으로 함수를 넘길 때 그 함수는 useCallback 을 씌워주는 것이 좋다. → 쓸데없이 자식 컴포넌트가 리랜더링 되는 것을 방지한다.
• useCallBack은 반드시 첫번째 인자인 함수 내에서 변화하는 state값을 두 번째 인자(deps 배열)의 원소로 추가해 줘야한다.

const onClickRedo = useCallback(() => {
    setWinNumbers(getWinNumbers());
    timeouts.current = [];
  }, [winNumbers]);