useCallback이 무엇일까??

 

 

목차

1. useCallback이란?

2. useCallback을 이용한 간단한 코드 만들기

 

 

 

 

 

1. useCallback

메모리제이션된 함수를 반환한다.

 

useCallback은 useMemo와 비슷한 Hook이라고 생각합시다. (useMemo에 대해서도 따로 설명을 드리도록 하겠다) useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 함수를 메모리제이션에 저장을 하고 재사용하고 싶을 때 다시 가져와서 사용하는 함수입니다. 

 

 

useCallback을 써서 활용한 간단한 코드 양식을 보여주도록 하겠다.

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

const Callback = () => {
    const [hi,setHi] = useState(0)
    const [bye,setBye] = useState(0)

    const hiClick = useCallback(()=>{
        console.log('hihi')
        setHi(hi+1)
    },[])

    const byeClick = useCallback(()=>{
        console.log('byebye')
        setBye(bye+1)
    },[])

 
    return (
        <>
            {hi}
            {bye}
            <button onClick={hiClick}>하이</button>
            <button onClick={byeClick}>바이</button>
        </>
    )
}

export default Callback

 

 

useState를 통해서 hi 와 bye의 기본 상태값을 ' 0 ' 으로 설정을 해놨다. 우리가 각각 '하이'와 '바이'라는 버튼을 클릭할 때 이벤트가 발생하고 'hiClick' 와 'byeClick'이라는 함수를 호출한다. 

 

그러면 호출된 함수를 보러가자. 

 

const hiClick = useCallback(()=>{
        console.log('hihi')
        setHi(hi+1)
    },[])
    
 const byeClick = useCallback(()=>{
        console.log('ㅂㅂㅂㅂ')
        setBye(bye+1)
    },[])

hiClick, byeClick 에 대한 함수이다.

 

이 코드의 모양이 어디선가 본 거 같지 않은가?? 맞다 우리는 useEffect에 대해서 설명할 때 위와 같이 비슷한 코드로 설명을 했다.

 

그렇다면 useCallback와 useEffect의 역할도 비슷하다고 생각해야할까? 그렇지 않다면 둘의 차이는 무엇일까??

 

useEffect의 역할은 내용을 지정한 값이 바뀔 때 그것을 감지해서 함수가 실행이 되는 역할을 하고 있다.useCallback의 역할은 내용을 지정한 값이 바뀔 때 그 함수를 메모리제이션에 따로 담아둔다는 역할을 하고 있다.

 

뭔가 둘이 비슷하면서도 좀 다른 느낌이다. 자 그럼 코드가 실행되는 것을 보고 마저 설명하도록 하겠다.

 

 

useCallback에서도 useEffect와 같이 componentDIdmount와 같은 기능들이 들어가있다.

useCallback의 2번째 인자값이 빈 배열일 경우 componentDidmount로 인식해서 최초 실행으로 한번 렌더링이 된다.

그래서 버튼을 누르면 최초의 한번만 실행이 되고(0에서 +1이 됨으로 1의 결과값이 나옴) 그 뒤로는 버튼의 숫자가 올라가지 않는다. 배열에 변화된 값을 넣으면 componentDidUpdate가 되면서 계속 실행이 될 것이다. 

 

​

useCallback의 경우 위와 같이 실행이 됐으면 이 실행된 함수를 메모리제이션에 따로 저장을 해두고 나중에 다시 사용하고자 할 때 빼내서 사용을 한다.