useEffect의 의존성 배열 warning!

React Hook useEffect has a missing dependency: 'saveMemo'. Either include it or remove the dependency array react-hooks/exhaustive-deps

메모 기능을 구현하던 도중, compile이 제대로 되기는 하였으나 warning이 거슬려 해결하고자 한다.

변경 전 코드

import React, { useState, useEffect } from "react";
import * as S from "./MainStyle.jsx";

function Main() {
  const [memo, setMemo] = useState(""); // 배열이 아니라 string으로

  useEffect(() => {
    // 로컬 스토리지에서 메모를 가져옴, 없을 경우 빈 배열로 초기화
    const storedMemos = localStorage.getItem("memo") || "";
    setMemo(storedMemos);
  }, []);

  // 메모 입력 이벤트 핸들러
  const handleMemoChange = e => {
    const updatedMemo = e.target.value;
    setMemo(updatedMemo);
  };

  // 메모 저장 이벤트 핸들러
  const saveMemo = () => {
    localStorage.setItem("memo", memo);
  };

  useEffect(() => {
    // 메모가 변경될 때마다 저장
    saveMemo();
  }, [memo]);

  return (
    <S.Main>
     /*생략*/
      <S.MainNote>
        <S.MainContainer>
          <textarea
            value={memo}
            onChange={handleMemoChange}
            placeholder="Type / for menu or select from Templates"
          />
        </S.MainContainer>
      </S.MainNote>
    </S.Main>
  );
}

export default Main;

이 경고는 useEffect 훅에서 의존성 배열에 있는 함수나 변수 중에 어떤 것을 사용하는지에 대한 경고이다. useEffect의 의존성 배열은 해당 useEffect가 어떤 상태나 함수에 의존하고 있는지를 명시해야 한다. 이를 통해 React는 컴포넌트가 렌더링될 때마다 불필요한 재실행을 방지할 수 있다.

해결 방법 중 하나는 해당 함수(saveMemo 등)를 useEffect의 의존성 배열에 추가하는 것이다. 그러나 여기에는 주의할 점이 있다. 만약 해당 함수가 useEffect 내에서 정의되었다면, useEffect 바깥에서 정의된 함수로 변경하거나, 해당 함수를 useCallback 훅을 사용하여 감싸서 의존성 배열에 추가하는 것이 좋다.

변경 후 최종 코드

import React, { useState, useEffect, useCallback } from "react";
import * as S from "./MainStyle.jsx";

function Main() {
  /*생략*/
  
  // 메모 저장 이벤트 핸들러
  const saveMemo = useCallback(() => {
    localStorage.setItem("memo", memo);
  }, [memo]);

  useEffect(() => {
    // 메모가 변경될 때마다 저장
    saveMemo();
  }, [saveMemo]);

  return (
    <S.Main>
     /*생략*/
      <S.MainNote>
        <S.MainContainer>
          <textarea
            value={memo}
            onChange={handleMemoChange}
            placeholder="Type / for menu or select from Templates"
          />
        </S.MainContainer>
      </S.MainNote>
    </S.Main>
  );
}

export default Main;

useCallback은 함수를 메모이제이션하여 의존성 배열에 안전하게 추가할 수 있도록 도와준다. 이렇게 하면 useEffect에서 의존성 배열이 빈 상태에서도 경고가 발생하지 않게 된다.