React Hook Memoization(메모이제이션) useCallback/useMemo

Programming/React.js

나쵸캣 2022. 12. 30. 19:43

React에서는 컴포넌트의 state 또는 부모에게서 받은 props 값이 변경될 때 마다 리렌더링합니다. 그리고 리렌더링될 때마다 컴포넌트의 변수와 함수들이 매번 재생성됩니다. 때문에 반복적이고 쓸데없는 리렌더링은 성능에 영향을 줍니다.

예시로 부모에게서 props로 {a, b}를 넘겨받았다면 props.a만 변경되어도 props.b관련 함수,변수도 다시 호출하여 실행합니다.

이런 불필요한 동작을 피하고자 메모이제이션을 적용한 useCallback 와 useMemo함수를 사용합니다.

uesCallback은 메모이제이션된 콜백을 반환합니다.

useCallback(fn, deps)와 같이 사용합니다.

fn: 메모이제이션할 콜백 함수

deps: 콜백의 의존성 배열, 콜백의 의존성 배열이 변경되었을 때 메모이제이션 버전이 변경됩니다.
의존성 배열이 없다면 매 렌더링마다 메모이제이션 버전이 변경될 겁니다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },	// fn callback 함수
  [a, b],	// deps(dependencies) 의존성 배열
);

memoizedCallback 함수는 의존성 배열에 있는 a 또는 b의 값이 변경되지 않는다면 함수가 새로 정의되지 않습니다. 반대로 a 또는 b의 값이 변경된다면 함수는 새로 정의될 것 입니다.

메모이제이션된 값을 반환합니다. useCallback의 변수 버전입니다.

useMemo(fn, deps)와 같이 사용합니다. useCallback(fn,deps)는 useMemo(()=>fn, deps)와 같습니다.

fn: 메모이제이션할 값을 반환할 함수

deps: 의존성 배열, 콜백의 의존성 배열이 변경되었을 때 메모이제이션 버전이 변경됩니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

memoizedValue는 의존성 배열에 있는 a 또는 b의 값이 변경되지 않는다면 값이 새로 정의되지 않습니다. 반대로 a 또는 b의 값이 변경된다면 값이 새로 정의될 것 입니다.