useCallback

useCallback은 React에서 함수 컴포넌트의 성능 최적화를 위해 사용되는 Hook이다.
useCallback을 사용하면 함수를 메모이제이션하고 필요할 때만 다시 생성할 수 있다.
이를 통해 불필요한 함수 생성과 컴포넌트 리렌더링을 줄여 성능을 향상시킬 수 있다.

▶️ useCallback 이란?

• useCallback은 입력값과 함수의 출력값 사이의 관계를 기억하는 메모이제이션된 콜백 함수를 생성한다.

• useCallback은 함수를 캐시하고 필요한 경우에만 새로운 콜백 함수를 생성하여 사용한다.

• useCallback은 의존성 배열을 기반으로 함수를 캐싱하므로 의존성이 변경되지 않는 한 이전에 생성된 함수를 재사용한다.

▷ 메모이제이션(Memoization)

메모이제이션(Memoization)은 컴퓨터 프로그램의 성능을 향상시키기 위한 기술이다.
이는 이전에 계산한 결과를 저장하여, 동일한 입력이 주어졌을 때 이전에 계산한 결과를 재사용하는 것을 의미한다.

이를 통해 중복 계산을 피하고, 실행 시간을 단축시킬 수 있다.
함수형 프로그래밍에서 메모이제이션은 함수의 실행 결과를 캐싱하여 동일한 입력이 주어졌을 때 이전에 계산한 결과를 반환한다.
이를 통해 같은 계산을 반복하지 않고, 이미 계산된 값을 빠르게 가져올 수 있다.

React에서 useCallback을 사용하여 함수를 메모이제이션하는 경우, 함수의 인스턴스가 처음 생성될 때 한 번만 생성되고 이후에는 동일한 인스턴스를 유지한다.
이는 의존성 배열에 의존하는 상태나 변수가 변경되지 않는 한, 동일한 함수 인스턴스가 재사용된다는 의미다.
따라서 함수의 계산 결과를 이전에 계산한 값으로 재사용할 수 있다.
이는 함수의 불필요한 재생성과 컴포넌트의 불필요한 리렌더링을 방지하는 데 도움을 준다.

▶️ useCallback 사용 방법

useCallback은 다음과 같은 형태로 사용된다:

const memoizedCallback = useCallback(()=>{callback}, [dependencies])

• 첫 번째 매개변수로 콜백 함수를 전달하고, 두 번째 매개변수로 의존성 배열(dependency array)을 전달한다.

• 의존성 배열에는 useCallback이 다시 실행되도록 만드는 변수나 값이 포함되어야 한다.

▶️ 사용 시 유의사항

• useCallback은 주로 자식 컴포넌트에게 전달되는 콜백 함수를 최적화하는 데 사용된다.
  자주 변경되지 않는 함수에 대해서만 useCallback을 사용하는 것이 좋다.

• useCallback은 함수의 참조 동등성(reference equality)을 기반으로 동작하므로, 콜백 함수 내부에서 참조하는 변수나 상태 값이 변경되어야 useCallback이 새로운 콜백 함수를 생성한다.

▶️ 장점

• useCallback을 사용하여 함수를 메모이제이션하면, 새로운 함수가 필요한 경우에만 함수를 생성하여 불필요한 리렌더링을 방지할 수 있다.

• 콜백 함수가 자식 컴포넌트의 props로 전달되는 경우, useCallback을 사용하여 새로운 함수가 전달되는 것을 방지하여 자식 컴포넌트의 불필요한 리렌더링을 줄일 수 있다.

• 이외에도 useCallback은 React.memo와 함께 사용되어 자식 컴포넌트의 리렌더링을 최소화하는 데 도움을 준다.
  useCallback을 사용하여 콜백 함수의 성능을 최적화할 수 있고, 애플리케이션 전체적인 성능을 향상시킬 수 있다.