memoization

React-memoization

메모이제이션(memoization)이란 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.
이는 동적 계획번의 핵심이 되는 기술이다. 위키디피아

리액트에서는 이러한 메모이제이션을 위한 아래와 같은 세개의 api를 제공한다.

• memo
• useMemo
• useCallback

리액트에서의 메모이제이션은 바로 이전의 값만 메모이제이션 한다.

memo

memo는 컴포넌트 자체를 메모이제이션 해주는 api이다.

import { memo } from "react";

function MomoizationPresenterPage(props) {
  console.log("프리젠터가 렌더링 됩니다!!");
  return (
    <div>
      <div>=================</div>
      <h1>이것은 프리젠터 입니다!!</h1>
      <div>=================</div>
    </div>
  );
}

export default memo(MomoizationPresenterPage);

리액트에서는 흔히 볼수 있는 container-presenter 컴포넌트 구성이다.
위에 보이는 컴포넌트는 자식 컴포넌트인 프리젠터(presenter)컴포넌트이다.
리액트는 부모 컴포넌트의 값만 변경이 되더라도 그 부모가 품고있는 자식 컴포넌트까지 함께 리렌더링이 일어나는데 위와 같이 memo로 컴포넌트를 감싸주면 그 자식 컴포넌트는 이전의 값을 기억하고 변경이 없으면 리렌더링이 일어나지 않게된다.
하지만 만약 props를 하나라도 넘겨주고 있다면 무조건 리렌더가 일어나기 때문에 이는 주의하여야 한다.

useMemo

useMemo는 변수의 사용하는 api이다.

  // 의존성 배열의 값이 변경되거나 실행이 될때 메모한 값도 변경이 된다.
const aaa = useMemo(() => Math.random(), []);
console.log(aaa);

Math.random은 0과 1사이에 값을 랜덤하게 나오게 하는 자바스크립트 메서드이다.
위와 같이 useMemo를 사용하게 되면 처음의 값만 들어오게 되고 그 이후로는 처음의 값만 들어오게 되면서 리렌더링이 일어나지 않게 된다.
useMemo 의존성 배열(dependency array)안에 변수나 함수를 넣어주고 그 값이 변경이 되거나 함수가 동작을 하게 되면 그 때는 메모한 값도 변경이 일어나게 된다.

useCallback

useCallback은 함수의 사용하는 api이다.

const [countState, setCountState] = useState(0);
  
const onClickCountState = useCallback(() => {
    setCountState((prev) => prev + 1);
}, []);

위 코드는 클릭시 카운트를 올려주는 함수이다.
useCallback은 위와 같이 state의 값을 변경시키는 함수를 다시 생성되지 않게 하기 위해 사용된다.
state의 값이 변경이 되면 컴포넌트가 리렌더링이 일어나면서 컴포넌트안에 함수와 변수들이 다시 생성이 되게 된다.
이를 방지하기 위해 useCallback을 사용한다.
이때 주의해야 할 점으로 setState의 prev를 이용하지 않으면 값의 변동이 일어나지 않게 된다.

이러한 리액트에서의 메모이제이션의 사용이유는 비싼 연산을 반복하는 것을 피하영 성능을 향상시키고 안정된 값을 제공하기 위해 사용하는 것이다.

출처 : 리액트와 메모이제이션