React Hook - useCallback

import { useEffect, useState, useCallback } from 'react';

const App = () => {
  // 함수형 컴포넌트라 랜더링될때 함수 내부의 변수(함수객체 포함)도 초기화됨

  const [number, setNumber] = useState(0);
  const [toggle, setToggle] = useState(true);

  const someFunction = useCallback(() => {
    console.log(`someFunc: ${number}`);
    return;
  }, [number]); // number 값이 바뀔때 마다 함수가 갱신됨

  useEffect(() => {
    console.log("someFunt이 변경됨");
  }, [someFunction]);
  
  return (
    <div>
      <input type='number' value={number}
      onChange={(event) => setNumber(event.target.value)}></input>
      <br/>
      <button onClick={() => setToggle(!toggle)}>{toggle.toString()}</button>
      <button onClick={someFunction}>call someFunction</button>
    </div>  
  )
};

export default App;

import React, { useEffect, useState } from "react";

const Box = ({ createBoxStyle }) => {
    const [style, setStyle] = useState({});

    useEffect(() => {
        console.log("박스 사이즈 변경");
        setStyle(createBoxStyle);
    }, [createBoxStyle]);

    return <div style={style}></div>;
};

export default Box;

import { useEffect, useState, useCallback } from 'react';
import Box from './Component/Box';

const App = () => {
  const [size, setSize] = useState(100);
  const [isDark, setIsDark] = useState(false);

  const createBoxStyle = useCallback(() => {
    return{
      backgroundColor: 'skyblue',
      width: `${size}px`,
      height: `${size}px`
    }
  }, [size]);
  
  return (
    <div style={{
      backgroundColor: isDark ? 'black' : 'white',
    }}>
      <input type='number' value={size} 
      onChange={(event) => setSize(event.target.value)}></input>
      <button onClick={() => setIsDark(!isDark)}>change theme</button>
      <Box createBoxStyle={createBoxStyle}></Box>
    </div>  
  )
};

export default App;