useMemo Hook으로 리렌더링 시 최적화하기

리액트 네이티브에서 useMemo라는 Hook을 사용해 값을 memoization해 최적화할 수 있다.

memoization이란 동일한 계산을 반복해야 할 때 불필요한 연산을 제거하기 위해 이전에 계산한 값을 재사용해 처리를 최적화하는 것을 의한다.

const value = useMemo(() => compute(a, b), [a, b]);

이렇게 Hook을 사용하면 a나 b의 값이 변경될 때만 값이 연산된다.

 

아래 예제 코드를 통해 확인해보자.

import React, { useState, useMemo } from "react";

...

const [datas, setDatas] = useState([{ ... }, { ... }]);

const datas1 = useMemo(() => 
  datas.reduce((acc, current) => {
  	console.log("reduce datas1");
	...
  }, {}),
  [logs],
);

const datas2 = datas.reduce((acc, current) => {
  console.log("reduce datas2");
  ...
}, {});

...

datas1은 useMemo Hook를 사용해 reduce하는 코드를 작성하고, datas2는 useMemo Hook을 사용하지 않고 reduce하는 코드를 작성하였다.

로그를 확인해보면 처음 렌더링 시에는 datas1, datas2의 reduce가 실행된 것을 확인할 수 있고, 리 렌더링 시에는 datas2의 reduce만 실행된 것을 확인할 수 있다.