Reactjs의 useCallback 이해하기

리액트에서 컴포넌트 내부에 선언된 함수는 모든 렌더링마다 새로운 참조로 재생성되어 useEffect 및 자식 컴포넌트와 관련된 문제를 일으킵니다. 이 함수에 의존하는 useEffect는 각 렌더링마다 다시 실행됩니다. 마찬가지로 자식 컴포넌트는 불필요하게 다시 렌더링됩니다. 이를 방지하기 위해 우리는 React.memo를 사용하여 자식 컴포넌트를 캐시하고 속성 변경시만 다시 렌더링하도록 할 수 있습니다. 그러나 함수를 속성으로 전달할 때 자식 컴포넌트는 여전히 다시 렌더링됩니다. 이는 각 렌더링마다 함수 참조가 변경되기 때문입니다. 이를 해결하기 위해 우리는 useCallback 훅을 사용하여 함수 참조를 캐시할 수 있습니다. useCallback는 함수와 의존성 배열을 인수로 받아 의존성이 변경될 때만 변경되는 캐시된 함수를 반환합니다. useCallback를 사용하면 함수가 안정적인 참조를 가질 수 있고 불필요한 다시 렌더링을 방지할 수 있습니다. 우리는 이벤트 핸들러, useEffect 내부에서 호출되는 함수 또는 함수를 반환하는 사용자 지정 훅이 있을 때 useCallback를 사용해야 합니다.