useCallback 최적화

포모로도 타이머를 만들다가 useCallback 함수를 최적화를 위한 작업 내용을 기록할려고한다.

useCallback()은 함수를 최초 렌더링 때 한 번만 생성되고, 컴포넌트가 리렌더링될 때마다 함수를 새로 만들지 않고, 의존성 배열에 있는 값이 바뀔 때만 함수를 새로 만드는 훅입니다.

그래서 포모로토 타이머를 만들다가 남은 시간을 배열에 넣으면 계속해서 초가 줄어들 때마다 불필요한 함수를 새로 생성하기 때문에 비효율적이다. 라고 생각이 들었습니다.

그렇다고 의존성 배열값을 빼버리면 타이머 활성화/
비활성화 토글 버튼이 제기능을 못하기 때문에 이를 해결하기 위해 useRef를 활용했습니다.

제기능을 못하는 이유는 timeLeft는 외부변수이기 때문에 초기값 0 만 참조합니다.
즉, 아무리 화면에 보이는 timeLeft가 줄어들어도 toggleTimerBtn 함수 내부의 timeLeft는 여전히 0으로 고정된 값이기에 if(0>0)이 되어 작동하지 않게됩니다.

(사진에서도 초가 줄어들 때마다 함수를 계속 생성하는 것을 확인 할 수 있습니다.)

"use client";

import { useState, useEffect, useCallback } from "react";

const PomodoroTimer = () => {
  const [timeLeft, setTimeLeft] = useState(0); // 타이머 초기 값
  const [isRunning, setIsRunning] = useState(false);

  const addTime = (minutes: number) => {
    setTimeLeft(minutes * 60);
    setIsRunning(false);
  };

  // 시작/일시정지 버튼
  const toggleTimerBtn = useCallback(() => {
    if (timeLeft > 0) {
      setIsRunning((prev) => !prev);
    }
  }, [timeLeft]);

  useEffect(() => {
    console.log("toggleTimerBtn 함수가 생성됨");
  }, [toggleTimerBtn]);

useRef를 이용해서 최적화하기

useRef란?

• 상태와 다르게 useRef는 값이 바뀌어도 리렌더링을 발생시키지 않습니다.
• .current를 통해 언제든지 항상 최신 값을 꺼낼 수 있습니다.

"use client";

import { useState, useEffect, useCallback } from "react";

const PomodoroTimer = () => {
  const [timeLeft, setTimeLeft] = useState(0); // 타이머 초기 값
  const [isRunning, setIsRunning] = useState(false);
  
  const timeLeftRef = useRef(timeLeft); //useRef 선언

  // ref 값 업데이트
  useEffect(() => {
    timeLeftRef.current = timeLeft;
  }, [timeLeft]);

  const addTime = (minutes: number) => {
    setTimeLeft(minutes * 60);
    setIsRunning(false);
  };

  // 시작/일시정지 버튼  
  const toggleTimerBtn = useCallback(() => {
    if (timeLeftRef.current > 0) {
      setIsRunning((prev) => !prev);
    }
  }, []);
  
  
  useEffect(() => {
    console.log("toggleTimerBtn 함수가 생성됨");
  }, [toggleTimerBtn]);

(페이지가 마운트 됐을 때만 함수를 호출하고 이후 타이머가 줄어들어도 함수를 계속 생성되지 않는 것을 확인 할 수 있습니다.)