[React] useMemo()

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

useMemo

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

 

첫 번째 파라미터 : 어떻게 연산할지 정의하는 함수

두 번째 파라미터 : deps 배열을 넣어준다.

이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해준다.

반면에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용한다.

 

useMemo를 통해, 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

도대체 이게 뭘까 궁금했는데, 공식 문서를 보니 다음과 같았다.

 

메모이제이션 된 값을 반환합니다.
useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 할 것입니다. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해 줍니다.

"렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용한다."

 

아직 정확하게 언제 써야하는지 장담은 못하겠지만, 뭔가 리스트에 새로운 값이 계속 추가되면서 평균 구하기와 같이 메모이제이션을 활용하면 유용할 때, 주로 쓰일 것 같다.

값이 변경되었을 때만 렌더링하도록 하는 것이라고 일단 나혼자서 정의를 내렸다.

 

useMemo 예제

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

const getAverage = numbers => {
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
}

const MyComponent = () => {
  const [number, setNumber] = useState();
  const [list, setList] = useState([]);

  const onChange = e => {
    setNumber(e.target.value);
  }

  const onClick = () => {
    const newList = list.concat(parseInt(number))
    setList(newList);
    setNumber();
  }

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input name="number" value={number} onChange={onChange}></input>
      <button onClick={onClick}></button>
      <h2>{avg}</h2>
    </div>
  )
}

export default MyComponent;

 

결론

useMemo는 특정 값이 바뀌었을 때만 연산을 하고 싶을 때 사용되며,

이를 통해 연산 최적화를 할 수 있다.

 

 

---