react useMemo

// useMemo => 메모라이제이션(기억)

 

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

//useMemo사용
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;