useCallback in React: 함수 재생성 방지 및 성능 최적화
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React 개발자
- 성능 최적화에 관심 있는 중급 이상 개발자
- 자식 컴포넌트로 함수를 전달하는 경우
- 함수 재생성으로 인한 리렌더링 문제를 해결하고자 하는 경우
핵심 요약
useCallback
은 함수를 메모화하여 리렌더링 시 함수 재생성을 방지함 (예:useCallback(() => { ... }, [의존성])
)- 자식 컴포넌트로 전달되는 함수에 사용하여 불필요한 리렌더링 최적화
useCallback
과useMemo
의 차이:useCallback
→ 함수 메모화 (함수 참조 유지)useMemo
→ 값 메모화 (계산 결과 유지)
섹션별 세부 요약
1. useCallback의 목적 및 사용 시기
- 문제 상황:
- 부모 컴포넌트에서 자식으로 함수를 전달할 때, 리렌더링마다 새로운 함수 생성 → 자식 컴포넌트 리렌더링
- 해결 방안:
useCallback
사용 → 함수 참조를 유지하여 리렌더링 방지- 예시:
```js
const handleClick = useCallback(() => {
console.log("Button clicked!");
}, []);
```
2. useCallback 사용 예시 및 성능 효과
- 비최적화 코드 (useCallback 미사용):
increment
함수가 리렌더링마다 재생성 → 자식 컴포넌트 리렌더링 유발
```js
const increment = () => setCount(count + 1);
```
- 최적화 코드 (useCallback 사용):
increment
함수를[count]
의존성으로 메모화 → count 변경 시만 재생성
```js
const increment = useCallback(() => setCount(count + 1), [count]);
```
3. useCallback과 useMemo의 차이
- 목적:
useCallback
→ 함수 메모화 (함수 참조 유지)useMemo
→ 값 메모화 (계산 결과 유지)- 사용 시기:
useCallback
→ 함수 재생성으로 인한 리렌더링 최적화useMemo
→ 비용이 많이 드는 계산 결과 재사용
4. useCallback의 의존성 배열 관리
- 의존성 배열
[ ]
은 함수 참조가 안정적으로 유지되도록 보장 - 의존성 변경 시만 함수 재생성 → 성능 향상
- 예시:
```js
const fetchData = useCallback(() => {
console.log("Fetching data for:", query);
}, [query]);
```
결론
- 자식 컴포넌트로 전달하는 함수 또는 의존성이 없는 상태/프롭스에 의존하는 함수에
useCallback
사용 - 의존성 배열을 정확히 설정하여 불필요한 리렌더링 방지
- 성능 최적화를 위해
useCallback
대신useMemo
는 값 메모화가 필요한 경우 사용