useCallback을 활용한 성능 최적화

useCallback

 메모이제이션 기법으로 컴포넌트의 성능을 최적화하는 데 사용하는 Hook이다. useMemo는 값을 메모이제이션 해주는 Hook이라면, useCallback은 콜백함수 자체를 메모이제이션 해준다.

 

 useCallback의 구조는 useMemo와 똑같으며, 메모이제이션 해줄 콜백함수와 의존성 배열을 포함해야 한다.

 

const calculate = useCallback(num => {
   return num + 1
}, [item])

 

 

사용방법

 먼저 아래와 같이 useCallback을 사용하지 않았을 경우 number의 값이 바꿀 때나, isDark의 값이 바뀔 때 모두 렌더링이 발생하기 때문에 useEffect가 실행이 된다. 이유는 someFunction은 콜백함수를 저장하는 메모리의 주소값을 참조하고 있는데, app 컴포넌트가 렌더링이 됐을 때 참조값 역시 변경이 되기 때문에 someFunction이 실행되지 않았음에도 불구하고 useEffect가 실행이 되는 것이다. (콜백함수도 결국에는 함수 객체이기 때문에 렌더링이 발생하면 메모리 주소값이 변경된다.)

 

function App() {
   const [number, setNumber] = useState(0);
   const [isDark, setIsDark] = useState(false)
   
   const someFunction = () => {
      console.log(`someFunction: number: ${number}`);
      return;
   }
   
   useEffect(() => {
      console.log('someFunction이 변경되었습니다.')
   },[someFunction])

}

 

 

 아래와 같이 useCallback을 사용한다면 useCallback의 의존성 배열의 값이 변경될 때만 useEffect가 실행되게 만들 수 있다.

 

function App() {
   const [number, setNumber] = useState(0);
   const [isDark, setIsDark] = useState(false)
   
   const someFunction = useCallback( () => {
      console.log(`someFunction: number: ${number}`);
      return;
   },[number])
   
   useEffect(() => {
      console.log('someFunction이 변경되었습니다.')
   },[someFunction])

}

 

 

 

 

 

 

Reference
https://cocoon1787.tistory.com/798
https://www.youtube.com/watch?v=XfUF9qLa3mU&t=2s