🌙 [React] Hook - useCallback

🌊 Hook - useCallback

: useCallback은 useMemo와 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다. 컴포넌트 내에서 함수를 선언하면 컴포넌트가 리렌더링 될 때 마다 새로 만들어진 함수를 사용하게 되는데, 대부분은 문제 없지만 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 useCallback을 사용하여 최적화한다. 즉, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. 

 

 

 

useCallback

import React, { useCallback, useMemo, useState } 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(()=> {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  }, [number, list]) // number 혹은 list가 바뀌었을 때 함수 생성

  // 기존 코드
  // const onChange = (e) => {
  //   setNumber(e.target.value);
  // };
  // const onInsert = (e) => {
  //   const nextList = list.concat(parseInt(number));
  //   setList(nextList);
  //   setNumber('');
  // };

  const avg = useMemo(() => getAverage(list), [list]);
  return (
    <div>
      <input
        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

 

 

 

 

리액트를 다루는 기술 을 참고하였습니다.