useMemo

useMemo란?

-리액트에서 컴포넌트의 성능을 최적화 하는데 사용하는 훅

-동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면

처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내 사용

 

예제

import React, { useState,useMemo } from 'react';

function App() {
  const [val1,setVal1]=useState(0);
  const [val2,setVal2]=useState(0);

  const handleAdd2 = ()=>{
    setVal2((prev)=>prev+1);
  }

  const handleAdd1 = ()=>{
    setVal1((prev)=>prev+1);
  }


  const computedVal = ()=>{
    console.log("compute complete!! "+val1*val1);
    return val1*val1;
  }

  //const compute = useMemo(computedVal , [val1]);

  return (

    <div>
      <div>{computedVal()}</div>
      <button onClick={handleAdd1}>val1++</button>
      <button onClick={handleAdd2}>val2++</button>
    </div>
  );
}

export default App;

useMemo 훅을 사용하기 전의 예제입니다.

val1의 값을 증가시키면 computedVal() 함수에 의해 val1*val1을 계산하게 됩니다.

val2의 값을 증가 시킬때는 사실 val1*val1을 다시 계산할 필요는 없습니다.

하지만 이 예제에서는 val2를 증가시킬때 다시 렌더링 되면서 computedVal()함수가 한번 더 동작하게 되어 불필요한

연산을 수행하게 됩니다.

 

 

useMemo 사용전 예제

여기에서 val1버튼이나 val2 버튼을 눌러도 computedVal()함수가 실행되는것을 보실수 있습니다.

 

 

 

import React, { useState,useMemo } from 'react';

function App() {
  const [val1,setVal1]=useState(0);
  const [val2,setVal2]=useState(0);

  const handleAdd2 = ()=>{
    setVal2((prev)=>prev+1);
  }

  const handleAdd1 = ()=>{
    setVal1((prev)=>prev+1);
  }


  const computedVal = ()=>{
    console.log("compute complete!! "+val1*val1);
    return val1*val1;
  }

  const compute = useMemo(computedVal , [val1]);

  return (

    <div>
      <div>{compute}</div>
      <button onClick={handleAdd1}>val1++</button>
      <button onClick={handleAdd2}>val2++</button>
    </div>
  );
}

export default App;

이제 useMemo훅을 사용해 봅시다.

useMemo의 첫번째 인자로 함수를 넣어주었고,두번째 인자로 의존성 배열을 넣었습니다.

val1의 값이 변경되었을때만 computedVal함수가 동작합니다.

 

val2버튼을 아무리 눌러도 콘솔에 아무것도 뜨지않습니다.

val1의 값이 변경되었을때만 함수가 동작하기 때문이죠