useCallback

useCallBack

useCallback훅은 React에서 제공하는 훅 중 하나로 함수를 메모이제이션하는 기능을 제공한다.
이 훅은 두 개의 인자를 받는다. 첫 번째는 메모이제이션하고자 하는 함수이며, 두번째는 의존성 배열(dependency array)이다. 의존성 배열 안의 값 중 하나라도 변경되면 함수의 새로운 메모이제이션된 버전을 반환한다.

함수를 메모이제이션함으로써, 불필요한 리렌더링을 피하고 React 애플리케이션의 성능을 향상시킬 수 있다. 함수는 의존성 배열 안의 값 중 하나라도 변경되지 않으면 동일한 함수의 인스턴스가 반환된다. 이는 의존성이 변경될 때만 함수를 다시 생성하고 그 외에는 이전에 생성된 함수를 반환함으로써 성능을 최적화하는데 활용된다.

import { useCallback, useState } from 'react';
import { data } from '../../../../data';
import List from './List';
const LowerState = () => {
  const [people, setPeople] = useState(data);
  const [count, setCount] = useState(0);

  const removePerson = useCallback((id) => {
    const newPeople = people.filter((person) => person.id !== id);
    setPeople(newPeople);
  },[people]);

  return (
    <section>
      <button
        className='btn'
        onClick={() => setCount(count + 1)}
        style={{ marginBottom: '1rem' }}
      >
        count {count}
      </button>
      <List people={people} removePerson={removePerson}/>
    </section>
  );
};
export default LowerState;

위 경우 useCallback 의존성인 people의 값이 변경될 경우 removePerson함수가 재생성된다.

버튼 클릭이벤트로 count 상태 값이 변경되어 LowerState 컴포넌트가 리렌더링된다.
그때 removePerson의 의존성에 포함된 people의 상태값이 변경되지 않아 removePerson은 재생성되지 않고 props로 넘겨진다.
하지만 people의 경우 LowerState 컴포넌트가 리렌더링되어 재생성되지만 List 컴포넌트에 memo를 사용하여 removePerson, people이 같은 값으로 확인하여 리렌더링 되지않는다.

---

여기서 헷갈리는 부분은 people이 재생성될 때 의존성의 영향을 끼치지 않느냐는 거다.

useCallback에서의 의존성 배열에 명시된 값이 변경되었을 때 결정되지만 이는 해당 변수의 값이 변경되었을 때 함수를 새로 생성한다는 것을 의미한다.

따라서 useCallback에서의 의존성이 [people]로 설정되어 있고, people 배열이 최초에 적용된 의존성 배열에 포함된 값과 동일하게 유지되는 한, people 배열이 변경되어도 removePerson 함수는 재생성되지 않는다.

이는 people 배열이 setPeople를 통해 변경될 때만 removePerson 함수가 재생성된다는 것을 의미한다. 다시 말해, useCallback에서의 의존성은 최초에 함수가 만들어질 때의 의존성 배열의 값으로 고정되며, 그 이후에는 해당 값이 변경되지 않으면 함수가 재생성되지 않는다.