useCallback를 사용하는 이유

useCallback은 렌더링 리소스를 줄이기 위해 사용한다. 

리액트 컴포넌트는 렌더링 될 때마다 컴포넌트 내부에 필요한 값들을 정의하는데 값이 변하지 않아재 렌더링할 시 굳이 다시 정의하지 않아도 되는 함수들이 있을 것이다. 그럴 때  useCallback 은 특정 함수를 다시 만들지 않아도 돼 라고 알려주는 역할을 한다고 생각하면 된다. 

 

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

const Component = () =>{
    const [state, setState] = useState(0)

    // 하단 함수 렌더링 될 때마다 함수를 정의 함
    const testFunction = () =>{ 
        console.log("testFunction 정의") 
    }

    return (
        <div>   
            <button onClick={()=>{
                setState((prev)=>prev+1)  // setState 실행 -> 재 렌더링
            }}>state:{state}</button>
        </div>
    )
}

export default Component

 

위 8번째 줄에서 testFunction은 컴포넌트가 렌더링 될 때마다 다시 만들어 진다. 만약에 testFunction이 항상 동일하다면 굳이 re-rendering 될 때마다 다시 만들어질 필요는 없다. 

 

const testFunction = useCallback(() =>{ 
    console.log("testFunction 정의") 
},[]) // 의존성배열에 들어있는 값이 변할때만 함수를 다시 정의

 

 

위와같이 testFunction 함수를 useCallback으로 감싸면 우리는 컴포넌트가 재렌더링 될 때마다 함수를 새로 만들지 않는다. 예외적으로 의존성 배열에 들어있는 원소의 값이 변할 때만 함수를 다시 만든다.

 

참고

https://react.dev/reference/react/useCallback