[6주차] 위클리 페이퍼 - useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명해 주세요.

이 Hook은 성능 최적화를 위해 사용하는 Hook으로, 컴포넌트의 불필요한 재렌더링을 방지하는 역할을 수행한다.

useMemo 의 기능과 차이점

값의 메모이제이션 (연산 결과를 메모리에 저장) 기능을 제공하여, 동일한 연산을 반복하지 않고 계산 결과를 재 사용할 수 있도록 함.

// computeExpensiveValue는 a와 b가 변경되지 않는 한, 재계산되지 않고 이전의 계산된 값을 반환
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback 의 기능과 차이점

함수의 메모이제이션 (입력 값에 대한 실행 결과를 메모리에 저장) 기능을 제공, 전달된 함수를 다시 생성하지 않고 재 사용할 수 있도록 함.

// doSomething 함수는 a와 b가 변경되지 않는 한, 재생성되지 않고 동일한 참조를 유지
const memoizedCallback = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

useMemo 와 useCallback 을 사용하는 상황

1. 참조 동일성이 중요한 경우
   • 하위 컴포넌트의 Prop으로 객체나 함수를 전달할 때, 해당 값이 변경되지 않도록 하는 경우 사용
2. 비용이 많이 드는 연산
   • 복잡한 연산이 포함된 데이터를 렌더링할 때, 연산 결과를 재 사용하여 성능을 최적화 할 수 있음

useMemo와 useCallback의 남용 시 문제점

1. 메모리 사용 비효율
   • 불필요하게 많은 값을 저장할 경우, 메모리 사용량을 늘릴 수 있음
2. 동작 시간의 비효율
   • 메모이제이션의 오버헤드로 인해, 애플리케이션의 응답시간이 증가할 수 있음
3. 관리 지점 증가
   • 코드의 복잡성이 증가, 의존성 배열의 관리가 어려워지고 디버깅이 복잡해질 수 있음

참고자료

• https://www.codeit.kr/topics/fs-paper3/lessons/8636
• React 공식 문서 - Hooks API
• React 공식 문서 - useMemo
• React 공식 문서 - useCallback