React useCallback
useCallback은 콜백 함수의 메모이제이션된 버전을 반환하는 훅으로, 종속성 중 하나라도 변경될 때만 함수가 변경됩니다. 이를 통해 동일한 인스턴스의 콜백이 사용되도록 보장하여 불필요한 리렌더링을 방지할 수 있습니다.
const memoizedCallback = useCallback(
() => {
// 콜백 함수 로직
},
[dependency1, dependency2, ...] // 종속성 배열
);매게변수
- callback: 메모이제이션하려는 함수.
- dependencies: 콜백 함수가 의존하는 종속성 배열. 메모이제이션된 함수는 이 종속성 중 하나라도 변경될 때만 업데이트됩니다.
반환 값
- memoizedCallback: 메모이제이션된 콜백 함수.
사용 사례
useCallback의 주요 사용 사례는 함수가 자식 컴포넌트로 전달되거나 성능에 민감한 작업에 사용될 때 함수의 재생성을 방지하는 것입니다.
예제
import React, { useState, useCallback } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
const [otherState, setOtherState] = useState(0);
const incrementCount = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<ChildComponent onIncrement={incrementCount} />
<button onClick={() => setOtherState(otherState + 1)}>
Increment Other State
</button>
</div>
);
}
function ChildComponent({ onIncrement }) {
console.log('ChildComponent 리렌더링');
return (
<button onClick={onIncrement}>
Increment Count
</button>
);
}
export default ParentComponent;incrementCount함수는useCallback을 사용하여 메모이제이션됩니다.ChildComponent는incrementCount가 변경될 때만 리렌더링되며, 이는count가 변경될 때만 발생합니다.ParentComponent에서otherState를 업데이트하는 버튼을 클릭해도ChildComponent는 리렌더링되지 않아 성능이 최적화됩니다.
주요 포인트
- 함수 메모이제이션:
useCallback은 불필요한 함수 재생성을 방지하여 성능을 최적화합니다. 특히 이러한 함수들이 자식 컴포넌트로 전달될 때 유용합니다. - 종속성 배열: 종속성 배열이 중요합니다. 메모이제이션된 함수는 종속성 중 하나라도 변경될 때만 변경됩니다. 잘못된 종속성은 오래된 클로저 또는 불필요한 업데이트를 초래할 수 있습니다.
- 성능 최적화:
useCallback은 성능을 최적화할 수 있지만, 모든 함수에 적용할 필요는 없습니다. 실제 성능 향상이 있는지 프로파일링하고 확인하는 것이 중요합니다.
일반적인 실수
- 잘못된 종속성: 필요한 모든 종속성을 포함하지 않으면 메모이제이션된 함수가 오래된 값을 사용할 수 있습니다.
- 과도한 사용: 모든 함수가 메모이제이션될 필요는 없습니다.
useCallback의 과도한 사용은 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 할 수 있습니다. - 메모이제이션 오해: 메모이제이션은 함수 재생성을 방지하는 것이지 함수 로직의 재실행을 방지하는 것이 아닙니다.
결론
useCallback은 React 애플리케이션에서 함수 메모이제이션을 통해 성능을 최적화하는 데 유용한 도구입니다. 올바른 사용법과 잠재적인 문제점을 이해하는 것이 중요합니다. useCallback을 적절하게 활용하면 복잡한 애플리케이션에서 상당한 성능 향상을 얻을 수 있습니다.
