React memorization(memo, useMemo, useCallback)

• 컴포넌트 리렌더링

• React.memo 예시

• useMemo, useCallback + React.memo 예시

컴포넌트 리렌더링

컴포넌트가 리렌더링 되는 경우는 2가지 입니다.

• props가 변하는 경우

• state가 변하는 경우

아래에 두 컴포넌트가 있습니다.

렌더링이 되는 것을 console.log로 찍어보겠습니다.

(함수이기 때문에 내부가 동작한다면 console.log()를 동작시킬 것 입니다.)

import { useState } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };

  console.log("ParentComponent");

  return (
    <div>
      <button type="button" onClick={handleClick}>
        버튼
      </button>
      <ChildComponent />
    </div>
  );
};

export default ParentComponent;

const ChildComponent = () => {
  console.log("ChildComponent");
  return <button onClick={null}>프린트</button>;
};

export default ChildComponent;

버튼을 클릭할 때마다 컴포넌트가 리렌더링된다.

React.memo 예시

React.memo : props check

props가 바뀌지 않는다면 같은 연산을 다시 하지 않도록 메모리제이션하는 Hoc(고차함수)

props가 변하지 않는다면 React.memo를 통해 아래와 같이 재연산을 막을 수 있다.

import { memo } from "react";

const ChildComponent = () => {
  console.log("ChildComponent");
  return <button onClick={null}>프린트</button>;
};

export default memo(ChildComponent);

이번에는 props를 직접 넘겨보자

import { useState } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };

  const handleLog = () => {};

  console.log("ParentComponent");

  return (
    <div>
      <button type="button" onClick={handleClick}>
        버튼
      </button>
      <ChildComponent onLog={handleLog} />
    </div>
  );
};

export default ParentComponent;

import { memo } from "react";

const ChildComponent = ({ onLog }) => {
  console.log("ChildComponent");
  return <button onClick={onLog}>프린트</button>;
};

export default memo(ChildComponent);

여기서 주목할 부분이 분명 props는 같은 handleLog가 들어왔는데 아래와 같이 ChildComponent가 찍힌다는 것이다.

React 함수에서는 내부의 로직을 순서대로 재실행을 하기때문에 handleLog는 매번 다른 메모리에 저장이 되므로 사실 다른 함수라고 봐야한다.

재연산을 막기 위해 = 즉 같은 메모리로 두기 위해

useMemo, useCallback + React.memo 예시

React.useMemo vs React.useCallback : state check

위 두개의 hook을 쓴다 useMemo는 값, useCallback은 함수다.

여기서는 handleLog는 함수이기때문에 useCallback으로 감싸준다.

import { useCallback, useState } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };

  const handleLog = useCallback(() => {}, []);

  console.log("ParentComponent");

  return (
    <div>
      <button type="button" onClick={handleClick}>
        버튼
      </button>
      <ChildComponent onLog={handleLog} />
    </div>
  );
};

모든 컴포넌트는 메모리제이션하면 좋은가?

결론은 그렇지는 않다.

메모리제이션 자체가 리소스를 쓰는 행위이기 때문에 반복적으로 렌더링을 개선할 경우에만 쓰도록 하자!