React Hook - useCallback, useMemo

useCallback()과 useMemo()

• 주로 렌더링 성능을 최적화 해야 하는 상황에서 사용한다.

• 두 Hook 모두 메모이제이션 (memoization)을 통해 연산의 결과 또는 함수를 저장해 둔다.
  의존성 배열이 변경되지 않으면 이전에 계산한 값을 재사용한다.

useCallback()

• 함수를 새로 생성하지 않아도 될때 사용한다.

useMemo()

• 값을 새로 생성하지 않아도 될때 사용한다.

useCallback()과 useMemo()사용법

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

const App = () => {
  const [list, setList] = useState([]);
  const input = useRef(null);

  // useCallback
  const addList = useCallback(() => {
    let val = input.current.value;
    let _list = [...list];
    _list.push(val);
    setList(_list);
  }, [list]);  // list의 값이 변경 되어야 addList라는 함수를 다시 생성한다.

  // useMemo
  const listMemo = useMemo(() => {
    return (
      list.map(
        (data, idx) => {
          return <li key={idx}>{data}</li>;
        }
      )
    )
  }, [list]);  // list의 값이 변경되어야 list를 다시 생성한다.

  return (
    <div>
      <ul> { listMemo } </ul>
      // useMemo에 저장된 값을 불러온다.

      <input ref={input} />
      // input이라는 변수에 input이라는 Element를 참조시킨다.

      <button onClick={addList}>추가</button>
      // addList의 함수를 연결시킨다.

    </div>
  );
}

export default App;

이와 같이 list의 값이 변경 되어야 함수와 값들을 새로 생성시키므로 인하여 렌더링 해야 할 컴포넌트가 많을 경우에는 list의 값의 변경사항이 없는데 list관련 함수와 값을 새로 생성 시킬 필요가 없다.
그런 상황일 때 useCallback과 useMemo를 사용한다.