[React] useMemo알아보기!

컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다.

하지만 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다. 

 

React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드이며 그 중 렌더링 최적하를 위한 Hook이 존재하는데, useCallback과 useMemo가 바로 그 역할을 하는 Hook이다.

---

 

useMemo란?

useMemo은 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다.

 

useMemo를 호출하여 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value 값이 동일할 경우에는 이전 렌더링의 value 값을 그대로 재활용할 수 있게 된다. 이는 메모이제이션(Memoization) 개념과 긴밀한 관계가 있다.

 

Memoization

메모이제이션(Memoization)은 알고리즘에서 자주 나오는 개념입니다. 기존에 수행한 연산의 결과값을 메모리에 저장을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. 이 메모이제이션을 적절히 사용한다면 굳이 중복 연산을 할 필요가 없기 때문에 앱의 성능을 최적화할 수 있습니다.

 

useMemo는 바로 이 개념을 이용하여 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화시킵니다. 직접 메모이제이션 개념을 이용하여 로직을 구현할 수도 있겠으나, useMemo Hook을 호출한다면 이런 로직을 직접 구현하는 것을 대신해 주기 때문에 훨씬 간편하다고 할 수 있습니다

 

useMemo 예시

import React, { useState } from "react";
import "./styles.css";
import { add } from "./add";

export default function App() {
  const [name, setName] = useState("");
  const [val1, setVal1] = useState(0);
  const [val2, setVal2] = useState(0);
  const answer = add(val1, val2);

  return (
    <div>
      <input
        className="name-input"
        placeholder="이름을 입력해주세요"
        value={name}
        type="text"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val1}
        type="number"
        onChange={(e) => setVal1(Number(e.target.value))}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val2}
        type="number"
        onChange={(e) => setVal2(Number(e.target.value))}
      />
      <div>{answer}</div>
    </div>
  );
}

 

해당 컴포넌트는 아직 최적화되지 않은 컴포넌트이다. 위의 컴포넌트에서 실제로 연산 로직에 영향을 주는 값은 val1, val2이다. 

 

자료출처 코드스테이츠

현재는 이름 상태가 변화하면 add 함수가 계속같은 결과값을 리턴함에도 불구하고 불필요하게 호출되고 있다. 

 

useMemo 사용

import React, { useState } from "react";
import "./styles.css";
import { add } from "./add";
import { useMemo } from "react";

export default function App() {
  const [name, setName] = useState("");
  const [val1, setVal1] = useState(0);
  const [val2, setVal2] = useState(0);
  const answer = useMemo(() => add(val1, val2), [val1, val2]);

 

 

자료출처 코드스테이츠

useMemo를 사용하여 add 함수의 호출을 최소화하고 이름을 입력할 때 add 함수가 호출되지 않도록 코드를 수정해보았다.