[ React ] - useCallback 을 쓰는 이유

useCallback

1.의존성에 포함된 값이 변경되지 않는다면 이전에 생성한 함수 참조 값을 반환 해준다.
2. useCallback은 최초에 혹은 특정조건에서 생성한 함수의 참조를 기억하여 반환해주는 hook.

새로 생성되지 않는다함은 메모리에 새로 할당되지 않고 동일 참조값을 사용하게 된다는 것을 의미하고, 이는 최적화된 하위 컴포넌트에서 불필요한 렌더링을 줄일 수 있다는 것을 뜻한다.

👆🏻 적용코드

인라인 함수 는 함수가 쓰인곳에서 렌더링이 발생할 때마다 새로 생성되는 것이고
로컬함수는 그 함수를 가지고 있는 컴포넌트의 렌더링이 발생 할 때마다 새로 생성된다.

인라인 함수

const Root = () =>{
  return (
    <>
    <Number onClick={()=> console.log('click !')}>
    <Number onClick={()=> console.log('click !')}>
      <Number onClick={()=> console.log('click !')}>  
        </>
)
}

const Number = ({onClick}) =>{
  return(
    <button onClick={onClick}>버튼 </button>
)
}

로컬함수

내부함수를 생성해서 child 컴포넌트에 내려주는 것이다.

const Root = () =>{
    const onClick = () =>{
      console.log('click !')
    }
    return (
      <Number onClick={onClick}/>
      <Number onClick={onClick}/>
      <Number onClick={onClick}/>
	)
}

const Number = ({onClick}) =>{
    return(
      <button onClick={onClick}>버튼 </button>
	)
}

인라인 함수보다는 로컬함수가 훨씬 낫지만 , 문제점은 onClick함수를 감싸고 있는 Number함수가 리렌더될때 내부 함수도 함께 리렌더 되는것이다.

👆🏻 useCallback 적용 예시

const Root = () =>{
  
	const [ clicked , setClicked ] = useState(false);
  
    const onClick =	useCallback(() => {
		setClicked(true)	
    },[])
    
    return (
      <Number onClick={onClick}/>
      <Number onClick={onClick}/>
      <Number onClick={onClick}/>
	)
}

const Number = ({onClick}) =>{
    return(
      <button onClick={onClick}>버튼 </button>
	)
}

이렇게 useCallback을 적용하게 되면 동일한 참조값의 props를 넘겨줫으니 리렌더되지않는다.

위에서 두번째 인자로 아무것도 주지 않았기때문에 onClick 함수는 최초 한번만 생성되고 이후에는 같은 함수 인스턴스가 계속 사용된다. 이로인해 onClick함수가 변경되지 않으므로 Number컴포넌트는 리렌더되지 않는다.

useCallback과 React.memo를 함께 사용하면 자식 컴포넌트에서의 리렌더를 최소화하는 더나은 성능을 얻을 수도 있다.