[React] Hooks : optimizing 성능 최적화(3) - useCallback

useCallback이란?

useCallback은 useMemo와 비슷한 Hook입니다. useMemo는 특정 결괏값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수입니다.

 

useCallback의 사용법

const memoizedCallback = useCallback(function, deps);

• useCallback은 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해 줍니다.
• useCallback 안에 첫 번째 매개변수로 구현하고자 하는 함수가 들어오고, 두 번째 매개변수 자리에는 의존성 배열이 들어갑니다.
• useCallback을 사용하면, 함수가 생성되고 나서 재생성되지 않습니다. But 상황에 따라서는 이 함수를 재생성해줘야 할 때가 있습니다.

 

예제

// src/App.jsx

import React, { useCallback, useState } from "react";
import Button from "./components/Button";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (e) => {
    setValue(e.target.value);
  };

  const onClickHandler = useCallback(() => {
    console.log("hello button!");
  }, []);

  return (
    <div>
      <input type="text" value={value} onChange={onChangeHandler} />
      <Button onClick={onClickHandler} />
    </div>
  );
};

export default App;

 

// src/components/Button.jsx

import React, { memo } from "react";

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

export default memo(Button);

 

총 정리하기!!

• memo() 를 사용하면 컴포넌트의 불필요한 리렌더링을 막을 수 있다.
  • 다만, 컴포넌트의 props가 있는 경우 useCallback과 useMemo를 적절하게 사용하여 리렌더링의 원인이 되는 것을 모두 제거해줘야 정상적으로 작동한다.
• useCallback의 대상은 함수, useMemo의 대상은 객체나 배열과 같은 값이다.
  • 원시타입 데이터는 useMemo를 사용하지 않아도 리렌더링 하지 않습니다. → useMemo 안 써도 됩니다