const Memorized = React.memo((props) => {
  props.fn();
  return <div>콘솔을 확인해보세요!</div>;
});

const App = () => {
  const [count, setCount] = React.useState(0);
  const [isUseCallback, setIsUseCallback] = React.useState(false);
  
  const fn = () => console.log("re-render!");
  const useCallbackFn = React.useCallback(() => {
    console.log("re-render!");
  },[]);
  const onClickParentComponent = () => {
    setCount((prev) => prev + 1);
  };
  
  const onToggleMode = () => {
    setIsUseCallback((prev) => !prev);
    console.clear();
  }
  return (
    <>
      <button onClick={onToggleMode}>{isUseCallback ? "일반" : "useCallback"} 모드로 전환</button>
      <div onClick={onClickParentComponent} id={count}>
        <h1>클릭해보세요 x{count}</h1>
        <Memorized fn={isUseCallback ? useCallbackFn : fn} />
      </div>    
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));