React - useCallback 사용법

 

useCallback은 useMemo와 비슷하게 memoization하는 hook이지만 함수를 memoization한다는 점에서 useMemo와 차별점을 가지고 있다. React에서는 컴포넌트 안에 함수가 선언되어 있으면 컴포넌트가 리렌더링 될 때 함수들을 재생성하게 된다. 하지만 useCallback으로 감싸 memoization된 함수는 의존성 배열에 들어있는 변수 또는 함수가 변경되지 않은 이상 재생성되지 않는다. 즉 useMemo와 비슷한 개념으로 useCallbak은 기존 함수를 재사용할 수 있게 하는 hook이다.

 

useCallback의 형태

import { useCallback } from 'react' // useCallack 사용을 위해 useCallback import

// useCallback으로 함수를 감싸기
const memoizedFunction = useCallback(() => {
    ...
}, [deps]) // deps는 의존성 배열

기본적인 useCallback 사용법은 위와 같다. … 부분에 함수 내부 코드를 작성하면 되고 의존성 배열에 어떤 변수 또는 함수가 변경되었을 때 memoizedFucntion을 재생성 할 것인지를 추가하먼 된다.

 

useCallback을 사용하는 경우

• 함수를 하위 컴포넌트에 props로 전달하는 경우
• 자주 재생성되는 함수를 최적화 시키려고 하는 경우
• useEffect 내에 사용되는 함수의 불필요한 재실행을 막기 위한 경우

// 상위 컴포넌트
const ParentComponent = () => {
    const [data, setDdata] = useState('')
    const handleClick = useCallback(() => {
        ...
        setData(...)
    }, []) // data값이 변경되면 함수 재생성
    
    // props로 함수 전달
    return <ChildComponent onClick={ handleClick } />
}

// 하위 컴포넌트
const ChildComponent = ({ onClick }) => {
    console.log('Child Component Render')
    
    return <button onClick={ onClick }>test</button>
}

위의 코드는 상위 컴포넌트에서 하위 컴포넌트로 handleClick이라는 함수를 전달하는 코드이다. handleClick이라는 함수는 data값을 변경하는 함수로 [] 의존성 배열에 아무 값을 넣지 않았기 때문에 최초에 한 번만 생성되는 함수다. 즉, 하위 컴포넌트가 리렌더링되도 handleClick이라는 함수는 재생성되지 않고 기존 함수를 그대로 사용하게 된다.

 

useEffect와 함께 사용하는 경우

const testComponent = () => {
    const [data, setData] = useState('')
    
    const testFunction = useCallback(() => {
        ...
    }, [data])
    
    useEffect(() => {
        testFunction()
    }, [testFunction])
    
    return <button onClick={ setData(...) }>test</button>
}

useEffect와 같이 사용하는 경우 위와 같다. 먼저 useEffect는 testFunction이라는 함수가 변경되었을 때 실행된다. 버튼을 클릭하면 data의 값이 바뀌는데 useCallback으로 감싸진 testFunction함수는 data값이 변경되면 함수를 재생성하도록 의존성 배열에 선언이 되어있다. 이와 같은 흐름으로 useEffect와 useCallback을 결합하여 사용할 수 있다.

 

useMemo와 결합하여 사용

또한 이외에도 useMemo와 useCallback을 결합하여 사용할 수 있다. 이 경우는 useMemo를 통해 memoization된 변수를 useCallback에서 사용하여 처리하는 함수일 경우에 결합하여 사용이 가능하다.

const [searchText, setSearchText]  useState('')

// userList에 값을 memoization
const userList = useMemo(() => {
    const data = list.filter((name => name.includes(searchText))) // 검색
    return data
}, [searchText])

// memoization된 userList를 testFunction에서 사용
const testFunction = useCallback(() => {
    ...
}, [userList])

memoization된 userList를 사용하여 testFunction에서 처리하고자 할 때 위와 같이 사용할 수 있다.

---

참고 사이트:

https://stackoverflow.com/questions/53159301/what-does-usecallback-usememo-do-in-react

What does useCallback/useMemo do in React?