setState 함수를 사용하면, 화면 전체가 다시 렌더 되면서 state와 여러개의 함수들을 다시 그린다. 문자 하나 하나 변경 될 때마다 컴포넌트가 다시 렌더되는 일이 발생한다.

만약 컴포넌트의 크기가 매우 크거나 함수의 로직이 매우 길다면, 단지 state로 인해 재렌더링하는 과정은 다소 불필요하다.

메모이제이션 기능을 사용한다면 컴포넌트의 불필요한 재렌더링을 줄이고 빠르게 렌더링을 할 수있다.

메모이제이션

특정 연산이나 함수의 값을 기억한 후 state의 변화로 컴포넌트를 재렌더하더라도 재생성하는 것이 아니라 기존에 저장된 값을 그대로 사용할 수 있다.

■ React 컴포넌트에서 사용할 수 있는 메모이제이션

• memo
• useMemo
• useCallback

memo

• 컴포넌트를 메모이제이션 하는 기능
• memo로 감싸진 컴포넌트의 결과를 저장시킨 후, 새로 렌더되는 결과와 저장된 결과가 같다면 해당 컴포넌트를 재렌더하지 않는다.

function Students({ name, class}){
  return(
    <div>
      <p> 학생 명단표 </p>
      <div> 이름 : {name} </div>
      <div> 반: {class} </div>
    </div>  
  ) 
}

export default React.memo(Students)

가정: 학생의 이름과 반 정보를 props로 받아오는 컴포넌트가 있다.
memo 로 적용된 컴포넌트는 상위 컴포넌트가 재렌더가 되더라도 넘어오는 props의 값이 동일하다면 컴포넌트를 재렌더링하지 않는다.
(바뀌는 props가 있으면 momo는 작동하지 않는다.)

useMemo

• useMemo는 연산된 결과를 담는 변수의 값을 저장

  useMemo에는 총 두개의 인자값을 받을 수 있다.

  첫번째 인자로는 적용할 연산 함수를 넣어준다.
  두번째 인자로는 적용할 변수를 배열로 감싼다.

function Count({ number }) {

  function add() {
	console.log('연산 중')
	return number += 1;
  }

  const sum = useMemo( () => add(), [number] )
	return(
	  <div>
		결과 : {sum}
	  </div>
  ) 
}

useCallback

• 함수를 메모이제이션 한다.
• 재렌더 되더라도 함수를 새로 그려내지 않아서 효율성을 올릴 수 있다.

useCallback( 함수 로직, [ 의존성 배열 ] )

실습

// container.tsx

import { useMemo, useCallback, useState } from "react";
import MemoizationPresenterPage from "./presenter";

export default function MemoizationContainerPage() {
  console.log("컨테이너가 렌더링 되었습니다!!");

  let countLet = 0;
  const [countState, setCountState] = useState(0);

  // useMemo
  const randomValue = useMemo(() => Math.random(), []);
  console.log(randomValue);

  const onClickCountLet = useCallback(() => {
    console.log(countLet + 1);
    countLet += 1; // == countLet = countLet + 1
  }, []);

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

  return (
    <>
      <div>카운트(let): {countLet}</div>
      <button onClick={onClickCountLet}>카운트(let) +1</button>
      <div>카운트(state): {countState}</div>
      <button onClick={onClickCountState}>카운트(state) +1</button>

      <MemoizationPresenterPage countState={countState} />
    </>
  );
}

// presenter.tsx

import { memo } from "react";

function MemoizationPresenterPage(props) {
  console.log("프리젠터가 렌더링 되었습니다!!");

  return (
    <>
      <div>=================</div>
      <div>이것은 프리젠터입니다.</div>
      <div>=================</div>
    </>
  );
}

// memo 도구를 사용하면 프리젠터 부분이 렌더링 되지 않는다.
export default memo(MemoizationPresenterPage);

• memo로 감싸진 컴포넌트의 결과를 저장시킨 후 새로 렌더되는 결과가 저장된 결과와 같다면 해당 컴포넌트는 재렌더링하지 않는다.
• memo로 적용된 컴포넌트가 상위 컴포넌트가 재렌더가 되더라도 넘어오는 props의 값이 동일 하다면 컴포넌트를 재렌더링하지 않는다.