[리액트] 리액트 훅 useCallback이란?

안녕하세요 고유입니다.

리액트(React) 애플리케이션을 개발하다 보면, 컴포넌트의 성능 최적화가 중요한 이슈로 부각될 때가 있습니다. 그중에서도 useCallback은 성능 개선을 위해 사용되는 훌륭한 도구입니다. 이번 글에서는 useCallback의 개념, 사용 방법, 그리고 실제 적용 시 얻을 수 있는 이점에 대해 알아보겠습니다.

useCallback이란?
useCallback은 리액트 훅 중 하나로, 함수형 컴포넌트에서 성능 최적화를 위해 사용됩니다. useCallback은 함수를 메모이제이션(Memoization)하는 역할을 수행합니다. 즉, 이전에 생성된 함수를 재사용하여 동일한 함수 인스턴스를 반환합니다.

useCallback의 사용 방법

const memoizedCallback = useCallback(callback, dependencies);

- callback:  메모이제이션할 함수입니다. 이 함수는 컴포넌트가 렌더링 될 때마다 새로 생성되는 것이 아닌, 동일한 함수 인스턴스를 유지합니다.
- dependencies (선택적): 배열 형태로 전달되며, 해당 값들이 변경될 때에만 새로운 콜백을 생성합니다. 이 배열을 통해 useCallback이 의존성을 감지하고, 의존성이 변경되지 않으면 이전에 생성된 콜백을 재사용합니다. 의존성 배열을 명시하지 않으면 매 렌더링마다 동일한 콜백이 재사용됩니다.

 useCallback의 이점

1. 성능 향상
useCallback은 불필요한 함수 생성을 방지하여 성능을 향상시킵니다. 일반적으로 컴포넌트의 렌더링이 발생하면 해당 컴포넌트 내부의 함수들도 새로 생성됩니다. 하지만 useCallback을 사용하면 동일한 함수 인스턴스를 유지하므로, 의도치 않은 렌더링과 함수 재생성을 방지하여 성능을 개선할 수 있습니다.

 2. 의존성 변경 시에만 함수 업데이트
useCallback은 의존성 배열을 통해 의존성을 감지하고, 의존성이 변경될 때에만 함수를 업데이트합니다. 이를 통해 불필요한 함수 재생성을 방지하고, 컴포넌트의 불필요한 리렌더링을 줄일 수 있습니다. 특히, 콜백 함수가 자식 컴포넌트의 props로 전달되는 경우 의존성 배열을 사용하여 최적화할 수 있습니다.

결론
useCallback은 리액트에서 성능 최적화를 위해 사용되는 강력한 도구입니다. 함수의 메모이제이션을 통해 함수 재생성을 방지하고, 의존성 배열을 사용하여 필요한 경우에만 함수를 업데이트할 수 있습니다. 이를 통해 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.