[React] Hook - useCallback( ), useMemo( )

useCallback()과 useMemo()

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

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를 사용한다.