useCallback

useCallback()

• useCallBack()는 함수를 메모이제이션 하기 위한 훅
  • 메모이제이션이란 쉽게 말해 메모리 어딘가에 저장해두고 나중에 쓰겠다는 것이다.
  • 함수형 컴포넌트가 리렌더링되면 컴포넌트 안에 선언해둔 함수나 인라인으로 작성한 함수를 다시 한 번 생성하게 된다.
  • 예를 들어 어떤 컴포넌트가 총 10번 렌더링된다면 그 안에 작성해둔 함수들도 10번 만들어지는거고 이건 메모리 관리에 그리 효율적이지 않다.
• 주로 자식 컴포넌트에게 전달해주는 콜백 함수를 메모이제이션할 때 쓴다.

useCallback() 사용법

• 우선 useCallback을 임포트해야 한다

import { useCallback } from "react";

useCallback('콜백 함수', '의존성 배열')

• 첫번째 인자는 실행할 콜백 함수이다.
• 두번째 인자는 디펜던시 어레이라고 불리는 의존성 배열이다.
• 배열에 넣은 어떤 값이 변했을 때 콜백함수를 새로 생성하고 다시 메모이제이션한다.

예를 들어 아래 xsumy 함수는 x나 y값이 변경되면 그 때, 다시 함수가 생성된다

import { useState } from "react";
import { useCallback } from "react";

const App = () => {
  const [x, setx] = useState(0)
  const [y, sety] = useState(1)
  const xsumy = useCallback(()=> {
    console.log(x+y)
  }, [x, y])
  return(
    <div>
      <button onClick={()=>{setx(x+1)}}>x 증가</button>
      <button onClick={()=>{sety(y+1)}}>y 증가</button>
    </div>
  )
}

export default App;

주의사항!

• 함수가 다시 생성되는 것이지 값이 변경되었다고 함수가 자동으로 실행되는 것이 아니다!!