[ React-Hooks ] useCallback 사용하기

useCallback은 useMemo와 상당히 비슷한 함수입니다 주로 렌더링 선능을 최적화해야 하는 상황에서 사용하는데 이 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있습니다

2021.06.26 - [공부/React] - [ React-Hooks ] useMemo 사용하기 에서 구현한 Average컴포넌트를 보면 onChange와 onInsert라는 함수를 선언해줬었습니다 이경우 이러한 방식은 문제는 없지만 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분은 메모리 효율이 좋지 않습니다 그래서 최적화해주는 게 좋습니다

1. useCallback 평균구하기 최적화

import React,{useState, useMemo, useCallback} from "react";

const getAverage = numbers => {
  console.log('평균값 계산 중..');
  if(numbers.length === 0) return 0;
  const sum = numbers.reduce((a,b) => a+b);
  return sum / numbers.length;
}

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  },[]); // 컴포넌트가 처음 렌더링될 때만 함수 생성
  const onInsert = useCallback(e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('')
  },[number, list]);// number 혹은 list가 바뀌었을 때만 함수생성 
  const avg = useMemo(() => getAverage(list), [list]);
  return(
    <div>
      <input type="text" value={number} onChange={onChange}/>
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) =>
          <li key={index}>{value}</li>
        )}
      </ul>
      <div>
        <b>평균값 : </b> {avg}
      </div>
    </div>
  );
};

export default Average;

useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고 두 번째 파라미터에는 배열을 넣으면 됩니다 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성하야 하는지 명시해야 합니다

onChange처럼 비어있는 배열을 넣게 되면 컴포넌트가 렌더링 될 때 만들었던 함수를 계속해서 재사용하게 되며 onInsert처럼 배열 안에 number와 list를 넣게 되면 인풋 내용이 바뀌거나 새로운 항목이 추가될 때 새로 만들어진 함수를 사용하게 됩니다

함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 합니다 예를 들어 onChange의 경우 기존의 값을 조회하지 않고 바로 설정만 하기 때문에 배열이 비어 있어도 상관없지만 onInsert는 기존의 number와 list를 조회해서 nextList를 생성하기 때문에 배열 안에 number와 list를 꼭 넣어 주어야 합니다