8. useMomo

# 특정 함수가 특정 시점에 실행되도록 메모라이제이션 하는 역할 인거 같다.

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));
    console.log('sum 함수 실행됨', sum);
    return sum; // 함수의 결과값을 반환한다. (여기서는 sum 함수의 결과값을 반환한다.)
  };

  // usememory 사용하기, getAddResult 함수를 기억하고, list가 실행될때만 실행한다.
  const addResult = useMemo(() => getAddResult(), [list]); // 이함수를 기억하고 있겠다는 뜻.

  return (
    <div>
      <button
        onClick={() => {
          setStr('안녕');
        }}
      >
        문자 변경
      </button>
      <button
        onClick={() => {
          setList([...list, 10]);
        }}
      >
        리스트값 추가
      </button>
      <div>
        {list.map((i) => (
          <h1>{i}</h1>
        ))}
      </div>
      {/* 위에서 선언한 함수를 실행한다. */}
      <div>
        {str}: {addResult}
      </div>
    </div>
  );
}

export default App;

강의를 한번듣고는 완전히 이해하기 힘드니... 여러번 반복해서 들을 필요가 있다...