[React] useMemo 사용이유와 코드예시

[React] useMemo 사용이유와 코드예시

---

* useMemo 가 하는일

> 연산결과를 memoization한다.

> 의존값이 바뀌었을 때만 연산을 실행하고, 값이 바뀌지 않았다면 연산을 실행하지 않는다.

> 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 값을 사용한다.

* useMemo 를 사용하는 이유와 주의점

> 사용이유 : 렌더링시에 불필요한 계산을 막아줌으로써, 성능을 최적화 해준다.

> 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다.

* useMemo 예시코드

// useMemo(callback,[depth])  의존값을 depth에 넣어준다.
// depth의 값이 바뀔때 마다, 이전에 캐싱된값과 비교해 값이 다를경우 callback함수를 실행시켜준다.

const getSum = useMemo(() => {
  const sum = list.reduce((a, b) => a + b);
  return sum / list.length;
}, [list]);