useCallback hook

useCallback이란?
React에서 성능 최적화를 위해 사용되는 hook중 하나로, 함수자체를 메모제이션(memoization)하여 불필요한 함수 재생성을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다

 

useCallback 왜 사용해야할까?

React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에 함수또한 재생성을 하게된다. 여기서 함수는 참조타입을 가지므로 렌더링마다 다른 참조 주소를 가지게 되는데, 이러한 이유로 재생성 되는것을 useCallback을 통하여 최초 렌더링시에 참조주소를 유지를 하고, 이전함수를 사용하는 것 이다.

useCallback 구문

• useCallback(memooizationFunctuin,[dependencies])
  • memooizationFunctuin: 메모제이션할 함수
  • dependencies: 의존성배열
    • [빈배열]: 한번만 함수를 반환
    • [의존성값]: 의존성값이 변경될때마다 함수를 다시 반환

useCallback 동작방식

• 마운트(mount): 컴포넌트가 최초로 화면에 나타날때 useMemo의 첫 번째 매개변수로 전달된 함수가 실행되고, 해당결과가 캐시된다.
• 언마운트(Unmount): 컴포넌트가 화면에서 사라질때, useMemo에서 캐시된 값은 사라진다.
• 업데이트(Update): 컴포넌트가 리렌더링될때, 의존성 배열에 있는 값이 변경되었다면 useMemo에서 캐시된 값을 업데이트하고, 변경된값이 없다면 이전에 캐시된 값을 재사용한다.

useCallback 사용법

- style 함수에 대한사용법

 

- useCallback 과 memo를 사용한 렌더링 최적화

자식에게 내려주는 데이터에 대해서 callback함수를 적용하였다. 이로인해 다른 상태가 변경되어도 똑같은 데이터에 대해서는 요청을 하지않고 이전 데이터를 사용하고 있다. 하지만 자식컴포넌트는 props가 변경되지않아도 상위 컴포넌트의 상태가 변경이 된다면 다시한번 렌더링을 하기때문에 이부분은 memo를 사용하여 렌더링이 발생하지 않도록 하였다.

 

useCallback 주의사항

- 최상위 레벨 호출: useEffect 를 호출하려면 구성요소의 최상위 수준에서 호출해야한다.

- 호출의 위치: useEffect를 호출할때는 조건문이나 반복문안에서 hook을 호출할 수 없다.

- Custom Hook: 일반함수가 아닌 use접두사가 붙은 자체훅에서 사용할수 있다.

- 렌더링 최적화에 사용: 주로 렌더링 최적화에 사용되며, 자식 컴포넌트에 콜백함수를 전달할때 사용된다.

useCallback 참고문서

useCallback – React