[경고문] useEffect의 dependancy배열.. - dispatch ??

React Hook useEffect has a missing dependency: 'dispatch' and 'getLocalStorageItem',. Either include it or remove the dependency array.

웨??....

오류의 원인은
작성한 ' useEffect내부에서 실행된 함수 ' 에서 사용되는 변수를 useEffect의 배열안에 넣어주지 않았기 때문이라고 한다.

const getLocalStorageItem = () => {
    const getData = localStorage.getItem("Tooniverse");
    const parseData = JSON.parse(getData);
    return parseData;
  };

		
useEffect(() => {
  console.log("Layout useEffect :", "render");
  const getItem = getLocalStorageItem();
  console.log(getItem);
  if (getItem === null) return dispatch(setLocalStorageData());

  dispatch(setInitialData(getItem));
}, []); // 진짜 엉뚱한것만 넣었었다.... fanLetterData ,characters, fooTitleArr 
/*
 const { fanLetterData } = useSelector((state) => state);
  const characters = fanLetterData.utility.characters;
  const fooTitleArr
*/

getLocalStorageItem 이라는 함수를 useEffect 바깥에서 선언 후

useEffect내부에서 호출하는데

getLocalStorageItem이라는 함수에서 사용하는 변수들을

useEffect안의 dependency배열에 넣어주셈 이라는 경고 문이였다.

그렇다면

getLocalStorageItem에서 사용하는 변수들 ( = 값)의 무엇을 넣어줘야 할까??

사용한 변수 찾기

const getLocalStorageItem = () => {
    const getData = localStorage.getItem("Tooniverse");
    const parseData = JSON.parse(getData);
    return parseData;
  };

함수안에서 사용한 것이라 머가 없다...

그런데 가만히 생각해 보면

const getData = localStorage.getItem("Tooniverse");

이 값은 매번 달라지는 것 아닌가??

따라서 리렌더링 될 때마다 최신 값을 항상 가지고 있어야 하므로

바깥에 변수 선언 하고 사용해야 한다.

결론은 내가 잘못 코드 짠거...

해결의 초석??ㅋㅋ

const getData = localStorage.getItem("Tooniverse");

const getLocalStorageItem = () => {
    //const getData = localStorage.getItem("Tooniverse");
    const parseData = JSON.parse(getData);
    return parseData;
  };

이렇게 작성해야 한다...

해결이 안되넹...

const getData = localStorage.getItem("Tooniverse");

const getLocalStorageItem = () => {
  const parseData = JSON.parse(getData);
  return parseData;
};  

useEffect(() => {
  const getItem = getLocalStorageItem();
  if (getItem === null) return dispatch(setLocalStorageData());
  dispatch(setInitialData(getItem));
}, [getData]);

//Warning : React Hook useEffect has a missing dependency:'dispatch' and 'getLocalStorageItem'.
//Either include it or remove the dependency array.

위의 코드가 뜬다. 계속해서... dispatch하고 getLocalStorageItem이라는 함수를 넣어주라는 것 같은데...

근데 useDispatch를 dependency 배열에 넣어두 될까?
안넣어도 될까?

결과적으로 넣어줘두 된다.

나와 같은 동일한 에러 발생 원인을 stackoverFlow의 링크클릭을 해서 참조 하면 되고,

redux에서도 dependency배열의 dispatch에 관한 내용도 있다.
Redux 공식홈페이지 dispatch how to handle in dependency

그리하여

  const getData = useMemo localStorage.getItem("Tooniverse"); 
// getData는 리렌더링이 되야 하므로 냅두고 
  const getLocalStorageItem = useCallback(() => {
    const parseData = JSON.parse(getData);
    return parseData;
  }, [getData]); // getData의 값의 변화가 있으면 변하게 해주고 

// getLocalStorageItem useCallback으로 감싸서 getData의 값만 바뀌면 
  useEffect(() => {
    const getItem = getLocalStorageItem();
    if (getItem === null) return dispatch(setLocalStorageData());

    dispatch(setInitialData(getItem));
  }, [dispatch, getLocalStorageItem]); // getLocalStorageItem의 값이 변경 될때 만...

참고 블로그

• leo-xee.io님의 블로그