React 오프라인 8강 - useMemo

Memorization

import { useMemo, useState } from "React";

function App() {
  const [list, setList] = useState([1, 2, 3, 4]);
  const [str, setStr] = useState("합계");

  const getAddResult = () => {
    let sum = 0; // 변수 초기화
    list.forEach((i) => (sum = sum + i)); // 리턴을 하지 않음

    return sum; // 변수 초기화를 let으로 해줬기 때문에 값이 바뀜
  };

  const addResult = useMemo(() => getAddResult(), [list]); // 함수를 기억하기

  return (
    <div>
      <button
        onClick={() => {
          setStr("안녕");
        }}
      >
        문자열 변환
      </button>
      <button
        onClick={() => {
          setList([...list, 10]);
        }}
      >
        리스트 값 추가
      </button>
      <div>
        {list.map((i) => (
          <h1></h1>
        ))}
      </div>
      {/* sum이 뜸 */}
      <div>
        {str} : {getAddResult()}
      </div>
    </div>
  );
}

export default App;

1. setList를 통해서 list의 값과 getAddResult 함수를 통해서 합계를 구하는 것은 useState로 그치기 때문에 이해할 수 있다.
2. 하지만 str이란 상태 변수가 나오고, 문자열 변환 버튼을 눌렀을 때 '합계'가 '안녕'이 되었으면 좋겠다.
3. 하지만 이런 상태로는 str이라는 상태 변수가 바뀔 때, rendering이 이루어져 getAddResult 함수까지도 함께 실행되게 된다.
4. 따라서 list라는 상태 변수와 getAddResult와의 의존성을 부여하면서 list의 값이 변할 때마다 함수를 실행할 수 있도록 '기억'하게 해주는 hooks 함수가 useMemo이다.
5. 이렇게 되면 문자 변환 버튼을 눌러도 str만 변하고, list는 변경 감지가 없기 때문에 setStr()만 실행된다.

• useMemo 공식 문서