[React] useCallback 알아보기

💡 useCallback

참고영상
https://www.youtube.com/watch?v=XfUF9qLa3mU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=7

 

useMemo 보러가기

https://hye-story-o0o.tistory.com/30

[React] useMemo 알아보기

 

React 애플리케이션에서 함수 컴포넌트를 작성하다 보면, 특정 함수가 반복적으로 재생성되어 성능에 부담을 줄 수 있다.

일반적으로 React 컴포넌트에서 함수를 선언하면, 해당 함수는 컴포넌트가 렌더링될 때마다 매번 새로 생성한다.

이러한 재생성은 함수가 불필요하게 많은 메모리를 사용하게 하고 성능을 저하시킬 수 있다.

이를 해결하기 위해 useCallback 훅을 사용한다.

useCallback 은 함수를 메모이제이션하여 필요할 때만 재사용할 수 있게 도와주는 React 의 성능 최적화 도구이다.

 

메모이제이션이란, 이전에 이미 계산된 값을 저장해두고, 동일한 입력이 여러 번 들어왔을 때 이전에 계산된 결과를 재사용하는 기법이다.

 

 

---

 

❓ useCallback 구조

const memoizedCallback = useCallback(
  () => {
    // 실행할 함수 내용
  },
  [dependencies]
);

• 첫 번째 인자: 우리가 메모이제이션 해줄 콜백함수를 정의
• 두 번째 인자: 의존성 배열
  • 이 배열에 포함된 값이 변경될 때만 새로운 콜백 함수를 생성한다.
  • 빈 배열을 전달하면 함수는 한 번만 생성되어 컴포넌트가 마운트될 때(맨 처음 화면에 렌더링 됐을 때) 정의된 함수를 계속 사용한다.

 

 

---

 

❓ useMemo vs useCallback

useMemo 와 useCallback 은 둘 다 성능 최적화를 위해 사용되며,

의존성 배열을 통해 어떤 상황에서 함수나 값이 재생성되어야 하는지를 제어할 수 있다.

그리고 의존성 배열에 포함된 값이 변경되지 않으면 이전에 메모이제이션된 값을 재사용한다.

 

근데 useMemo 는 값을 메모이제이션하여 반환하고,

useCallback 은 함수자체를 메모이제이션하여 반환한다

 

 

---

 

❓ 간단한 예제

import React, { useState, useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // increment 함수를 메모이제이션하여 재사용
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 빈 의존성 배열을 전달하여 컴포넌트가 처음 렌더링될 때만 함수 생성

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

코드 설명

• useState Hook: useState 를 사용해서 count 상태와 setCount 함수를 선언함.
  • count 는 현재 카운트 값을 저장한다.
  • setCount 함수는 count 값을 업데이트한다.
• useCallback Hook: useCallback 을 사용해서 increment 함수를 정의
  • increment 함수는 setCount 를 호출해서 count 를 1 증가시키는 함수임.
  • 의존성 배열에 빈 배열을 전달하여, increment 함수를 한 번만 생성하고 계속 재사용함.
• 버튼을 클릭하면 increment 함수가 호출되어 count 가 증가함

 

예제 실행 결과

 

 

정리

• 여기서 useCallback 이 해주는 역할은 increment 함수를 메모이제이션 하는거임.
• useCallback 을 사용해서 increment 함수를 메모이제이션하면, 함수가 렌더링 될 때마다 새로운 함수가 생성되지 않고 한 번 생성된 함수를 재사용할 수 있음.
• 그리고 useCallback 의 두 번째 인자로 빈 배열을 전달하여 컴포넌트가 컴포넌트가 처음 렌더링될 때만 함수가 생성됨 ➡ 이후로는 동일한 함수를 계속 재사용함.
• 즉, 버튼을 클릭할 때마다 increment 함수가 호출되어 count 상태를 업데이트 하고, count 상태만 변경됨.
  • 그니까 버튼을 클릭할 때 함수를 다시 생성하고 호출하는게 아니라 처음에 저장해놨던 함수를 불러와서 사용하는거임.
• useCallback 을 사용하지 않으면 컴포넌트가 계속 렌더링 되고 함수를 계속 불러와서 불필요한 재렌더링이 발생함.

 

 

---

 

⚠ 주의사항

1. 남용하지 않기

useCallback 은 함수를 재활용하기 위해 메모리를 따로 하나 소비해서 저장해 두는 것이다.

그래서 모든 함수에 useCallback 을 사용하면 오히려 성능에 악영향을 줄 수 있다.

필요한 경우에만 사용하자 !!

 

 

---

 

✅ 요약

1. useCallback 은 React 훅 중 하나로, 함수자체를 메모이제이션하여 성능 최적화에 도움을 주는 훅이다.
2. useCallback 을 사용하면 렌더링 될 때마다 함수가 새로 생성되지 않고, 의존성 배열의 값이 변경될 때만 함수가 재생성된다. ( 빈 배열이면 맨 처음 렌더링 될 때 함수를 저장하고 계속 재사용 )
3. 모든 함수에 useCallback 을 사용할 필요는 없다. 실제로 필요한 곳에서만 사용하자!