useCallback

• 원래 함수는 렌더링될 때마다 새롭게 할당된다. ⇒ 특정 값이 변했을 때만 새롭게 할당되고, 그렇지 않다면 기존의 것을 쓰고 싶다면? ⇒ useCallback!!

• 렌더링 시 표기한 dependency가 변했으면 함수를 새롭게 반환(후 저장), 변하지 않았으면 기존의 것을 반환
• 호출이 아닌 단순 반환이므로 호출은 따로 해줘야 함에 주의

• dependency가 빈배열이면 최초 렌더링때 반환된 함수를 (리렌더링 될 때마다) 계속 쓴다

import "./App.css";
import { useCallback, useState } from "react";
import Count from "./components/Count";

function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  return (
    <div>
      <Count
        label="count1"
        count={count1}
        onClick={() => setCount1(count1 + 1)}
      /> //useCallback을 사용하지 않았으므로 App이 렌더링될 때마다 새로운 함수가 props로 내려진다 
				// => Count1은 다른 카운트를 변경해도 재렌더링된다

      <Count
        label="count2"
        count={count2}
        onClick={useCallback(() => setCount2(count2 + 1), [count2])}
      />
      <Count
        label="count3"
        count={count3}
        onClick={useCallback(() => setCount3(count3 + 1), [count3])}
      />

				//useCallback을 사용했으므로 App이 렌더링되면 의존하는 count2,3의 변경여부에 따라 새로운 함수나 기존 함수가 props로 내려진다 
				// => Count2,3은 다른 카운트를 변경하면 재렌더링 되지 않는다
    </div>
  );
}

export default App;

import React from "react";

const Count = React.memo(({ count, label, onClick }) => {
  console.log(label, "++"); //이게 렌더링될 때마다 실행됨
  return (
    <>
      <button onClick={onClick}>{label}</button>
      <h1>{count}</h1>
    </>
  );
});

export default Count;