useCallback

useCallback

useCallback 은 특정 함수를 새로 만들지 않고 재사용 할 때 사용하는 hook 이다.

즉 함수 를 메모이제이션 하기 위해 사용하는 hook 이다. 컴포넌트가 re-render될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.

따라서 이러한 React로 만든 앱을 최적화 하기 위해 불필요한 렌더링을 방지하여 앱의 퍼포먼스와 효율성을 높일 수 있다.

• useCallback(cb, deps)

사용 이유

React 에서는 컴포넌트가 다시 렌더링 될 때, 컴포넌트 안에 선언된 함수를 새로 생성한다. 즉 지속적으로 렌더링을 하며 함수도 계속 생성한다는 의미이다.

const App = () => {
  const [name, setName] = useState("FoxMon")

  const handleChange = (e) => {
      setName(e.target.value)
  }

  const handleClick = () => {
    console.log(name)
  }

  return (
      <>
        <input onChange={handleChange} />
        <button onClick={handleClick}>Button</button>
    <>
  )
}

위의 코드의 경우 input 태그에 onChange에 대한 이벤트를 handleChange에서 처리하고 있는 모습이다. input태그에 입력된 값을 setName을 통해 state의 값을 변경하고 있다. 이럴 경우, 타이핑을 할 때마다 해당 컴포넌트가 렌더링 되면서 그 안의 함수들도 전부 새롭게 생성된다.

import { useCallback } from "react"

const App = () => {
  const [name, setName] = useState("FoxMon")

  const handleChange = useCallback((e) => {
      setName(e.target.value)
  }, [])

  const handleClick = useCallback((e) => {
      console.log(name)
  }, [])

  return (
      <>
        <input onChange={handleChange} />
        <button onClick={handleClick}>Button</button>
    <>
}

위의 코드의 경우 useCallback을 추가했기 때문에, 타이핑 될 경우, input의 값이 변함에 따라, input태그만 재렌더링 되고, button의 경우 useCallback에 의해 새롭게 렌더링되지 않는다.