[React.js] useMemo

리액트 훅 중 하나로 불필요한 연산을 최적화해준다

 

동일한 연산이 반복되면 계속 다시 연산시키는 게 아니라

최초에 한번 연산 후 메모리에 결괏값을 저장하고 그 값을 가져오는 방식

 

자식 컴포넌트 내부의 연산은 부모 컴포넌트가 리렌더링이 되면 계속 재실행된다

이는 연산이 짧으면 그나마 괜찮으나 연산이 길어지면 웹 성능을 떨어뜨림

→ 이때 useMemo를 사용해서 연산이 불필요하게 수행되지 않게 하는 거임

 

https://mm-study-front.tistory.com/51

[React.js] 최적화

 

---

 

 

사용하려면

import {  useMemo } from "react";

 

import로 넣어주고

 

  useMemo(() => {}, [])

 

useMemo(동일한 연산의 콜백함수, 배열)로 사용해 주면 된다

 

이 배열은 의존성 배열이라 함

→ useMemo는 배열의 값이 변해야만 콜백함수를 실행

 

 

 

useMemo의 큰 장점은 콜백함수를 실행해 얻은 반환값을 반환해 줌

 

이게 무슨 말이냐면

 

  const dataCount = () => {

    const totalCount = a.length;

    const nCount = a.filter((b) => b.n).length;

    const mCount = totalCount - nCount;

    return {

      totalCount,

      nCount,

      mCount,

    };

  };

 

 const { totalCount, nCount, mCount } =  dataCount );

  return (

      <div>

        <div>{totalCount}</div>

        <div>{nCount}</div>

        <div>{mCount}</div>

      </div>

    </div>

  );

 

이런 식으로 함수식의 return 값을 받는 변수를 함수 밖에서 선언해서 사용했어야 했는데

 

 

useMemo는 

  const { totalCount,  nCount , mCount } = useMemo(() => {

    const totalCount = a.length;

    const nCount = a.filter((b) => b.n).length;

    const mCount = totalCount - nCount;

    return {

      totalCount,

      nCount,

      mCount,

    };

  }, []);

 

  return (

      <div>

        <div>{totalCount}</div>

        <div>{nCount}</div>

        <div>{mCount}</div>

      </div>

    </div>

 

이런식으로 바로 사용 가능