• 리액트 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링된다.
• 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다.
• 렌더링 최적화를 위한 Hook : useMemo와 useCallback

---

useMemo

• 특정 연산의 결과값(value)을 재사용하고자 할 때 사용
  👉🏽 불필요한 "연산"을 줄여줌 (렌더링 시 마다 매번 연산하지 않고 필요할 때만 연산하도록)
• 메모이제이션(Memoization) 개념을 이용

useMemo 사용 안 한 경우

function Calculator({value}){
	const result = calculate(value);
	return <>
            <div>{result}</div>
          </>;
}

• props로 넘어온 value 값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, <div> 엘리먼트로 출력
• calculate 함수가 내부적으로 복잡한 연산을 해야해서 시간이 몇 초 이상 걸릴 경우, 해당 컴포넌트는 렌더링을 할 때마다 이 함수를 계속해서 호출하기 때문에 매번 시간이 몇 초 이상 걸리고, 사용자가 "앱의 로딩 속도가 느리다"는 생각을 하게 된다.

useMemo 사용한 경우

import { useMemo } from "react"; // useMemo를 사용할 때는 꼭 import해서 불러와야 한다

function Calculator({value}){
	const result = useMemo(() => calculate(value), [value]); // 종속성 배열
	return <>
          <div>{result}</div>
          </>;
}

• useMemo를 호출해 calculate를 감싸주면, 이전에 구축된 렌더링과 새로 구축되는 렌더링을 비교해 value 값이 동일한 경우에는 이전 값을 재활용.

메모이제이션 Memoization

• 기존에 수행한 연산의 결과값을 메모리에 저장(캐싱)을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
• 메모이제이션을 적절히 사용한다면 굳이 중복 연산을 할 필요가 없기 때문에 앱의 성능을 최적화할 수 있다.
• 알고리즘에서 자주 나오는 개념
• 직접 메모이제이션 개념을 이용하여 로직을 구현할 수도 있지만, useMemo Hook을 호출하면 이런 로직을 대신 구현해주기 때문에 훨씬 간편하다.

---

useMemo 예제

import React, { useState, useMemo } from "react"; // useMemo 불러오기
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 = useMemo(() => add(val1, val2), [val1, val2]); // 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(val1, val2) 연산이 실행되도록 useMemo 사용
• useMemo를 사용하지 않으면 (const answer = add(val1, val2);)
  👉🏽 이름을 변경할 때도 add(val1, val2) 연산이 실행됨