useCallback React: 성능 최적화와 함수 재생성 방지

useCallback in React: 함수 재생성 방지 및 성능 최적화

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • React 개발자
  • 성능 최적화에 관심 있는 중급 이상 개발자
  • 자식 컴포넌트로 함수를 전달하는 경우
  • 함수 재생성으로 인한 리렌더링 문제를 해결하고자 하는 경우

핵심 요약

  • useCallback함수를 메모화하여 리렌더링 시 함수 재생성을 방지함 (예: useCallback(() => { ... }, [의존성]))
  • 자식 컴포넌트로 전달되는 함수에 사용하여 불필요한 리렌더링 최적화
  • useCallbackuseMemo의 차이:
  • 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값 메모화가 필요한 경우 사용