렌더링 수 줄이기: useMemo 사용

react를 하다가 그런 경험이 있을 것이다. 어떤 함수가 어떤 state에 의해 리렌더링를 하면서 그 때마다 함수 호출, 같은 연산을 하는 일을 하게 된다. 이렇게 같은 연산을 반복하면 성능이 안좋아질 수 있다. 이럴 때 useMemo를 사용할 수 있다. useMemo는 리액트 어플리케이션 성능을 최적화하기 위한 방법인 연산 결과를 재사용한다.

useMemo

=> useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 한다. 한 번 연산해본 결과를 기억해두고, 다시 동일한 입력이 들어오면 기억해둔 데이터를 반환하는 방법.

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

여기서 state로 관리하는 변수 a, b가 바뀔 때만 변경되었을 때에만 메모이제이션된 값만 다시 계산.

[a, b]가 변경되지 않으면 이전결과를 바로 반환한다.

참고

 

Hooks API Reference – React

 

[React] useMemo란?