useMemo / useCallback

Memo

input창에 타이핑하면 그때마다 리렌더링 되는 것을 막아줌.

// components/Button.js

import React, { memo } from "react";

const Button = () => {
  console.log("리렌더링되고 있어요.");
  return <button>버튼</button>;
};

export default memo(Button);

그러나 Memo는 아래와 같이 함수를 props로 전달 받게 되면 다시 리렌더링되기 시작하는 한계가 있음 (useState의 변경으로 인해 App.js가 리렌더링되면서 App.js에 있는 함수, 배열이나 객체가 재실행, 재생성되기 때문에 그 값을 props로 부모로부터 넘겨받으면 당연히 리렌더링이 일어남)

// components/Button.js

import React, { memo } from "react";

const Button = ({ onClick }) => {
  console.log("리렌더링되고 있어요.");
  return <button onClick={onClick}>버튼</button>;
};

export default memo(Button);

 

useCallback

대상이 함수일 때 사용

  //useState와 매우 흡사
  const onClickHandler = useCallback(() => {
    console.log("hello button!");
  }, []);

 

useMemo

대상이 객체나 배열일 때 사용

// src/App.jsx

  const data = [
    {
      id: 1,
      title: "react",
    },
  ];

// useMemo 적용
  const data = useMemo(() => {
    return [
      {
        id: 1,
        title: "react",
      },
    ]
  }, []);

 

※무분별한 사용은 오히려 퍼포먼스 성능의 저하를 가져올 수 있다. 리렌더링이 반드시 필요한 component나 값에는 위의 hook들을 사용하지 않는 게 더 좋음 (굳이 비교를 하지 않아도 될 것에도 react가 비교하는 과정을 추가하기 때문.)