[Hook] useMemo

import logo from './logo.svg';
import './App.css';
import { useState, useMemo } 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);
    return sum;
  };

  //list가 변경 되었을 때만 getAddResult()가 실행 될 수 있게 기억
  const addResult = useMemo(() => getAddResult(), [list]);

  return (
    <div>
      <button
        onClick={() => {
          setList([...list, 1]);
        }}
      >
        add
      </button>
      <button
        onClick={() => {
          setStr('sum');
        }}
      >
        문자변경
      </button>
      {list.map((i) => (
        <h1>{i}</h1>
      ))}
      <div>
        {str} : {addResult}
      </div>
    </div>
  );
}

export default App;