리액트 컴포넌트가 리렌더링이 발생하는 경우는 아래와 같다.
- state가 바뀔 때
- props가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
렌더링 최적화가 필요한 이유
불필요한 리렌더링이 많이 발생하게 된다면 성능 저하로 이어진다. 불필요한 리렌더링이 발생하지 않고 특정 상황(dependencies: 의존성 배열)에만 리렌더링이 발생하도록 최적화하는 작업(useMemo, useCallback 사용)을 해준다면 애플리케이션의 성능을 개선할 수 있다.
useMemo와 useCallback은 memoization 개념을 가지고 있다.
Memoization 이란?
프로그래밍에서 동일한 연산을 반복해야 하는 경우에 이전에 연산한 값을 caching해서 이후 재사용함으로 동일한 연산이 반복되는 것을 제거해서 프로그램의 실행 속도를 높이는 기술이다.
useMemo
useMemo 는 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 때 사용한다.
const cachedValue = useMemo(calculateValue, dependencies)- 렌더링 과정에서 특정 값(dependencies)이 바뀌었을 때만 연산을 실행하고, 특정 값이 바뀌지 않았다면 이전에 실행했던 연산 값을 다시 재사용하는 방식
useCallback
useCallback 은 렌더링 성능을 최적화할 때 사용한다.
const cachedFn = useCallback(fn, dependencies)- 렌더링 과정에서 특정 값(dependencies)이 바뀌었을 때 이미 만들어둔 함수(useCallback의 첫번째 파라미터)를 반환하는 방식
- 주의할 점은 함수를 반환하는 것이지 호출하는 것이 아니다. useCallback에 의해 반환된 함수를 호출할지 여부와 언제 호출할지는 개발자가 정한다.
useMemo 와 useCallback 의 차이점
useMemo는 memoization 된 값을 반환하고,useCallback은 memoization 된 함수를 반환한다.
공식문서에서 정의하는 useMemo와 useCallback은 아래와 같다.
useMemois a React Hook that lets you cache the result of a calculation between re-renders.
useCallbackis a React Hook that lets you cache a function definition between re-renders.
useMemo, useCallback 은 어떤 경우에 사용할까?
리렌더링의 과정에서 특정 값 또는 함수(dependencies)가 변경될 때 상황에 맞게 사용한다.
- 특정 값이 변경될 때는
useMemo를 사용 - 특정 함수가 변경될 때는
useCallback을 사용한다.
References
리액트를 다루는 기술 p.204-209
FE Developer 매일 한 걸음씩!