memoization

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

리액트에서는 3개의 memoization을 제공한다.

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

memoization 함수는 함수를 인자로 받는다.

JavaScript의 클로저 기능 때문에 memoization 함수가 불려지면,
cache(object)를 공유하게 된다.

memoization은 함수를 받아서 함수 자체를 return 한다.

또한,

memoization 기법은 성능을 얻는 대신에 공간(메모리)를 더 많이 사용하게 된다.
캐싱해야 하는 함수의 인자의 크기와 다양성 그리고 결과에 따라 캐싱해야 하는 데이터가 언제나 변하기 때문이다.

momo

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

import { memo } from "react";

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

export default memo(MomoizationPresenterPage);

위는 presenter페이지이고 memo로 return을 해줌으로써
container가 리랜더링 되어도 이 영역에 상관 없는 리랜더링이면 presenter는 리랜더링 되지 않는다. 이전의 값을 기억해 이 값이 변해야만 랜더링이 되기 때문이다. 또한 memo는 보시다시피 컴포넌트 자체를 리턴하는것으로 보아 HOC의 일종이다.

useMemo()

function Parent({ a, b }) {
  // 'a'가 변경된 경우에만 다시 렌더링 됩니다:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // 'b'가 변경된 경우에만 다시 렌더링 됩니다:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

useCallback()

useCallback Hook을 사용하면 shouldComponentUpdate가 계속 작동하도록 다시 렌더링간에 동일한 콜백 참조를 유지할 수 있습니다.

// `a` 또는` b`가 변경되지 않으면 변경되지 않습니다
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

ex 2)

// memoization 폴더 _ presenter 파일
import {useCallback} from 'react'

const containerPage = ()=>{
	console.log("컨테이너가 렌더링 됩니다.")

	const [countState,setCountState] = useState(0)

// 2. useCallback으로 함수 기억하기	
// useCallback을 사용하게 되면 함수를 다시 만들지 않습니다.
	const onClickCountLet = useCallback(()=>{
		console.log(countLet+1)
		countLet += 1
		},[])

// 3. usecallback의 잘못된 사용사례 _ state를 기억하기 때문에 아무리 count를 올려도 1만 찍히게 됩니다.
	const onClickCountState = useCallback(()=>{
		console.log(countState+1)
		setCountState(countState+1)
		},[])

// 4. 3번의 잘못된 사용사례 보완
	const onClickCountState = useCallback(()=>{
		setCountState((prev)=>prev+1)
		},[])

    }

export default containerPage

❗️ useCallback을 쓰지 말아야 할 때
의존성 배열의 인자가 1~2개보다 많아질 때는 차라리 리렌더를 하는것이 유지 보수에는 더 좋은방법 입니다.성능이 조금이나마 좋아지는 것 보다는 유지보수가 편리한 편이 훨씬 좋습니다.
따라서 의존성 배열의 인자가 2개를 초과할때는 그냥 리렌더를 해주시는게 좋습니다.