useMemo 개념정리

리액트 Hooks라이브러리안에 useMemo라는 것이 들어가있다

16.8버전부터 리액트에 Hooks가 사용가능해졌다

그전에는 class 컴포넌트 방법을 썼는데
이제 Hooks를 사용한다

react Hooks의 useMemo를 사용하기 위해서는 react에서
useMemo를 import 받아야 한다.

memo는 말 그대로 Memoization이라는 뜻인데
컴퓨터가 동일한 계산을 반복해야할 경우
이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복을 막고
프로그램 실행속도를 빠르게 하는 기술이다.

동적 계획법의 핵심이 되는 기술이라고 할 수 있다

최적화를 위해 자주 사용할 필요가 있으므로 잘 알아둬야 할 것 같다

리액트에서는 기본적으로 메모이제이션을 사용할 수 있도록

3가지의 api를 제공해준다

1. memo
2. useMemo
3. useCallback

리액트 메모이제이션에서 알아야할 중요한 것은

바로 이전의 값만 메모이제이션 한다는 것이다

메모이제이션을 사용하는 이유는

무거운 연산을 반복하지 않도록해서 성능을 끌어올려 향상된 성능을 제공하고
안정된 값을 제공하기 때문이다

useEffect에서 [] 안에 넣는 값의 변화에만 반응하도록 해서

그 값이 변화할 경우에만 트리거 하도록 하면 memoization과 비슷한
전략이라고 할 수 있다

하지만 memoization을 하는 과정 자체에서 리소스가 발생하므로
부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다

간단한 예제도 적어보면서 개념을 더 익혀보자

import "./App.css";
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;
}
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;

위 코드는 문자를 변경했을 경우 값이 변경되는 것을 막고 싶을 때를 예로 들었다

고연산이 들어가서 예를들어 1초가 걸리는 연산이 필요하다고 했을 때

최초에는 합계를 구하기 위해서 출력되는 것이 맞지만

문자열이 변경됬을 경우에는 불필요하게 실행됨으로 막아줄 필요가 있다

useMemo를 이용해서 막아줄 수 있다

const addResult라는 변수를 하나 만들면된다

const addResult = useMemo(()=>getAddResult(),[list]);

위 코드를 보면 ()=>getAddResult()라고 적었는데 그 뜻은

내가 이 함수를 기억할게 라고 이해하면된다

그렇다면 그 함수를 기억한 상태에서 언제 실행하래? 라고 했을 경우

dependency즉 의존을 어디에 하냐?

list라는 곳에 의존을 해서 list의 값이 변경되었을 때에만

동작하겠다고 하는 것이다.

list값이 변경되지않으면 움직이지 않게 만들어서

불필요한 비싼연산을 막아줄 수 있다

여기서 주의할점은

const addResult = useMemo(()=>getAddResult(),[list]);

const getAddResult=()=> {
let sum=0;
list.forEach(i=> sum=sum+i );
console.log("sum 함수 실행됨",sum);
return sum;
}

이렇게 적어주면 실행되지 않는다

순서를 꼭 지켜줘야한다

자바스크립트는 인터프리터니까 밑에 있어야한다

위에서부터 순서대로 작동함으로

순서를 맞춰줘야 에러가 없이 출력된다