useEffect의 의존성 배열 오류 해결 => useCallBack

import { useCallback } from "react";

// ... Your imports and other code ...

export default function DayPage() {
  // ... Your state declarations ...

  // Function to fetch data using useCallback
  const handleFetchData = useCallback(() => {
    dayRender(userId, month, date)
      .then((response) => {
        // 데이터 처리 로직
        //console.log(response.data.data);
        setDayConsumptionData(response.data.data.paymentResponses); //계좌 결제내역
        setCashConsumptionData(response.data.data.cashPayments); //현금 결제내역
        setDaySumData(response.data.data.daySummary); //일일 합계
      })
      .catch((error) => {
        // 에러 처리 로직
        console.log(error);
      });
  }, [userId, month, date]); // Specify dependencies for useCallback

  // 소비내역이 추가되면은 오른쪽 상세내역이 다시 렌더링되어야 함
  useEffect(() => {
    handleFetchData(); // Fetch data on mount
  }, [handleFetchData]); // Update the useEffect dependency to handleFetchData

  // Function to handle button click and fetch data
  const handleButtonClick = () => {
    handleFetchData(); // Fetch data when the button is clicked
  };

  // ... Rest of your code ...
}

By using useCallback, the handleFetchData function will only be re-reated if its dependencies (userId, month, or date) change. Otherwise, the same memoized function will be reused across renders, reducing unnecessary re-executions and improving the performance of your component.

 

 

useCallBack을 쓰면 좋은점

useCallback은 React Hooks 중 하나로, 함수를 메모이제이션하여 리렌더링 시 함수가 재생성되는 것을 방지하는데 사용됩니다. 이를 통해 성능 최적화를 할 수 있습니다. useCallback을 사용하는 주요 장점은 다음과 같습니다:

성능 최적화: 함수를 메모이제이션함으로써 불필요한 함수 재생성을 방지하여 성능을 향상시킵니다. 함수의 메모리 할당과 초기화가 줄어들어, 렌더링 속도가 향상됩니다.

메모리 사용량 감소: useCallback을 사용하면 메모리에 여러 버전의 함수가 유지되는 것을 방지하여 메모리 사용량을 줄일 수 있습니다.

불필요한 리렌더링 방지: 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트들도 리렌더링되는데, 함수가 재생성되지 않도록 useCallback을 사용하면 자식 컴포넌트들이 불필요한 리렌더링을 방지할 수 있습니다.

콜백 함수 안정성: 콜백 함수를 다른 컴포넌트에 전달할 때, useCallback을 사용하면 콜백 함수가 의도한 대로 작동하는 것을 보장할 수 있습니다. 콜백 함수의 의존성이 변경되지 않는 한 항상 동일한 콜백 함수 인스턴스가 사용됩니다.

의존성 배열 관리: useCallback은 의존성 배열을 통해 함수를 갱신하고, 해당 배열의 값이 변경될 때에만 함수를 새로 생성합니다. 이를 통해 컴포넌트의 의존성 관리를 더욱 쉽게 할 수 있습니다.

요약하면, useCallback은 함수 재생성을 방지하여 성능을 향상시키고, 콜백 함수 안정성을 보장하며, 메모리 사용량을 줄이는 등의 장점을 제공합니다. 따라서 불필요한 리렌더링을 줄이고 성능 최적화를 위해 useCallback을 적절하게 활용하는 것이 좋습니다.