165. useCallback()으로 함수 재생성 방지하기

 

React.memo는 객체 외에 prop 값에도 작동하게끔 할 수 있다

객체를 생성하고 저장하는 방식만 조금 변경해주면 되는데 이 작업은, 리액트에서 제공하는 추가적인 훅을 통해 할 수 있는다. 이것이 useCallback 훅이다. useCallback 훅은 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅으로 리액트에, 우리는 이 함수를 저장할 것이고 매번 실행때마다 이 함수를 재생성할 필요가 없다는 것을 알릴 수 있다

이렇게 되면, 동일한 함수 객체가 메모리의 동일한 위치에 저장되므로 이를 통해 비교 작업을 할 수 있다

 

useCallback 훅을 사용하고 함수를 첫 번째 인자로 전달하면 useCallback은 이 저장된 함수를 반환해준다

그리고, 이 App 함수가 다시 실행되면 useCallback이 리액트가 저장한 함수를 찾아서 그 같은 함수 객체를 재사용한다 따라서, 어떤 함수가 절대 변경되어서는 안된다면 이 useCallback을 사용해 함수를 저장하면 된다

 

우리가 전달한 모든 props 값이 비교가 가능하게끔 전달했기 때문에 React.memo가 역할을 수행할 수 있다

이 toggleParagraphHandler 객체가 useCallback 덕분에 메모리 안에서 항상 같은 객체임을 보증하기 때문이다

 

즉 useCallback은 함수가 재실행될 때  함수를 저장하여 재실행될 때 재생성할 필요가 없게끔 설정하는 것이다

 

import React, { useState, useCallback } from 'react';
import DemoOutput from './components/Demo/DemoOutput';

import './App.css';
import Button from './components/UI/Button/Button';
function App() {
  console.log('APP RUNNING');

  const [showParagraph, setShowParagraph] = useState();
  const toggleParagraph = useCallback(() => {
    setShowParagraph((prev) => !prev);
  }, []);

  return (
    <div className="app">
      <h1>Hi there!</h1>
      <DemoOutput show={showParagraph} />
      <Button onClick={toggleParagraph}>Toggle Paragraph</Button>
    </div>
  );
}

export default App;