[React] 📋useMemo / 🔏useCallback / 🗒React.memo

렌더링 최적화를 위한 Hook인
useMemo와 useCallback에 대해 알아보자💨

useMemo : 값의 재사용을 위해 사용하는 Hook
useCallback : 함수의 재사용을 위해 사용하는 Hook

📋 useMemo

아래 코드에서 만약 Calculator가 복잡한 연산을 하는 함수라서
계산된 값을 반환하는 게 오래 걸리며, props로 받은 value값이
계속 바뀌는 게 아니라면, useMemo를 사용하여 최적화를 할 수 있다.

useMemo를 사용하면 value값이 이전과 동일한 경우에는
이전 렌더링의 value값을 그대로 재활용할 수 있게 된다.

(이전 값과 같은데, 계산이 오래 걸리는 함수를 굳이 다시 호출할 필요가 없게 됨)

/* useMemo 가져오기 */
import { useMemo } from "react";

function Calculator({ value }) {

	const result = useMemo(() => calculate(value), [value]);

	return <>
      <div>
					{result}
      </div>
  </>;
}

같은 함수 내에 있는 첫 번째 input창에 이름을 입력하면
리렌더링이 되어서 add함수도 재호출이 되는 것을 볼 수 있다.

이때 useMemo를 사용하면 val1, val2의 값이 바뀔 때에만
add함수가 호출되어 불필요한 렌더링을 막아준다.

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

const add = (num1, num2) => {
  console.log("숫자가 들어옵니다.");
  return Number(num1) + Number(num2);
};

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]);
  // const answer = add(val1, val2);
  console.log(answer);

  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>
  );
}

---

🔏 useCallback

사용법은 useMemo와 비슷하다.
다른 점이 있다면 값이 아니라 함수를 재활용한다는 것.

useCallback을 사용하면 그 함수가 의존하는 값들이
바뀌지 않는 한 기존 함수를 계속해서 반환한다.

But, 이렇게 단순하게 사용하기 위해 useCallback을
사용하면, 큰 의미가 없거나 오히려 더 손해일 수 있다.

❓그럼 언제 사용하는 게 좋을까?
useCallback을 이용해 함수 자체를 저장해서 다시 사용하면,
함수의 메모리 주소 값을 저장했다가 다시 사용하는 것과 같다.
따라서 다른 함수의 인자로 넘기거나 자식 컴포넌트의
props로 넘길 때 예상치 못한 성능 문제를 막을 수 있다.

/* useCallback 가져오기 */
import React, { useCallback } from "react";

function Calculator({ x, y }) {

    // x와 y값이 동일하다면 다음 렌더링 때 이 함수를 다시 사용
    const add = useCallback(() => x + y, [x, y]);
  

	return <>
      <div>
					{add()}
      </div>
  </>;
}

다크 모드를 눌렀을 때 getItems함수가 계속 호출될 필요는 없다.
또한 자식에게도 getItems를 넘겨주고 있기 때문에,
useCallback을 사용하면 불필요한 렌더링을 막아줄 수 있다.

import { useState, useCallback } from "react";
import List from "./List";

export default function App() {
  const [input, setInput] = useState(1);
  const [light, setLight] = useState(true);

  const theme = {
    backgroundColor: light ? "White" : "grey",
    color: light ? "grey" : "white"
  };

  const getItems = useCallback(() => {
    return [input + 10, input + 100];
  }, [input]);

  const handleChange = (event) => {
    if (Number(event.target.value)) {
      setInput(Number(event.target.value));
    }
  };

  return (
    <>
      <div style={theme} className="wall-paper">
        <input
          type="number"
          className="input"
          value={input}
          onChange={handleChange}
        />
        <button
          className={(light ? "light" : "dark") + " button"}
          onClick={() => setLight((prevLight) => !prevLight)}
        >
          {light ? "dark mode" : "light mode"}
        </button>
        <List getItems={getItems} />
      </div>
    </>
  );
}

-------
/* 자식 컴포넌트 */
import { useState, useEffect } from "react";

function List({ getItems }) {
  const [items, setItems] = useState([]);

  useEffect(() => {
    console.log("아이템을 가져옵니다.");
    setItems(getItems());
  }, [getItems]);

  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

export default List;

---

🗒 React.memo

React에서 성능 최적화를 위해 사용되는 HOC(Higher Order Component)이다.
React.memo는 컴포넌트의 props가 변경되었을 때만 다시 렌더링 한다.

(useState, useReducer, useContext 훅을 사용한다면,
state나 context가 변할 때 다시 렌더링이 된다.)

import React from "react";

const Child = React.memo((props) => {
  /* props를 사용하여 렌더링 */
})

👉 React(공식문서1) - useMemo ＋ useCallback ＋ React.memo
👉 React(공식문서2) - useMemo ＋ useCallback