[React] 리액트 Hooks : useMemo() 함수 사용법

memozation은 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 필요할 때 재사용하는 프로그래밍 기법을 의미합니다. 이러한 기법은 중복 연산을 필할 수 있기 때문에 성능을 최적화할 수 있게 됩니다. 

🚀 useMemo()란?

리액트에서 컴포넌트가 리렌더링 될 때 변화가 없는 부분도 리렌더링 된다면 자원이 낭비되고 성능에도 문제가 생기게 됩니다. 이러한 상황에서 useMemo를 사용 시 의존성 배열의 값에 아무런 변화가 없다면 이전에 연산된 값인 memorized value를 리턴하고 불필요한 연산을 없애 성능을 최적화할 수 있습니다.

 

useMemo 사용법

먼저 App.jsx와 components/ShowState.jsx파일을 아래와 같이

// App.js

import React, { useState } from "react";
import ShowState from "./components/ShowState";

const App = () => {
  const [number, setNumber] = useState(0);
  const [text, setText] = useState("");

  const increaseNumber = () => {
    setNumber((prevState) => prevState + 1);
  };

  const decreaseNumber = () => {
    setNumber((prevState) => prevState - 1);
  };

  const onChangeTextHandler = (e) => {
    setText(e.target.value);
  };

  return (
    <div className="App" style={{ margin: "50px" }}>
      <div>
        <button onClick={increaseNumber}>+</button>
        <button onClick={decreaseNumber}>-</button>
        <input
          type="text"
          placeholder="Text..."
          onChange={onChangeTextHandler}
        />
      </div>
      <ShowState number={number} text={text} />
    </div>
  );
};

export default App;

 

// components/ShowState.js

import React from "react";

const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};

const ShowState = ({ number, text }) => {
  const showNumber = getNumber(number);
  const showText = getText(text);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

export default ShowState;

App.jsx에서 number와 text를 ShowState 컴포넌트로 내려주고 해당 값을 출력해줍니다.

하지만 콘솔창을 보시면 숫자를 바꿨을 때는 "숫자가 변동되었습니다."만,
글자를 바꿨을 때는 "글자가 변동되었습니다."만 출력되야하는데
둘 다 출력되고 있습니다.

변경된 state에 해당하는 함수만 실행되어야 하는데 굳이 실행되지 않아도 될 함수가 실행된다는 것은 불필요한 자원을 낭비하고 있다는 것을 의미합니다.

따라서 해당 값을 연산하는 코드 쪽에 useMemo를 사용해서 불필요한 연산을 생략해보도록 하겠습니다.

 

useMemo 기본 형태

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

useMemo를 사용해서 memoizedValue라는 memorization 될 값을 선언하고 의존성 배열에 a와 b값을 넣어 a, b의 변경 여부를 확인하며, 변경 시 computeExpensiveValue를 이용하여 연산된 값을 memoizedValue에 대입합니다.

 

ShowState.jsx 파일에 useMemo를 적용해보면

// components/ShowState.js

import React, { useMemo } from "react";

const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};

const ShowState = ({ number, text }) => {
  const showNumber = useMemo(() => getNumber(number), [number]);
  const showText = useMemo(() => getText(text), [text]);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

export default ShowState;

의도하는 대로 숫자가 변경되었을 때는 숫자에 대한 연산만, 글자가 변경되었을 때는 글자에 대한 연산만 수행하는 것을 확인할 수 있습니다.