useEffect 질문 드립니다.

[강병민]

  const [objArr, setObjArr] = useState([]);

  useEffect(() => {
    let datas = localStorage.getItem("test2");
    datas = JSON.parse(datas);
    setObjArr(datas);
  }, [objArr]);

  const handleArr = (e) => {
    let copy = [...objArr];
    copy = copy.filter((data) => {
      return data.id !== e.target.dataset.id;
    });
    localStorage.setItem("test2", JSON.stringify(copy));
  };

이런식으로 코드를 짜서 버튼을 클릭하면 Localstorage 값을 바꿔주고, 그 값을 objArr 스테이트에 담아서 렌더 하는데 ,

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 이런 에러가 뜹니다.  의존성배열 안에 있는 값이 계속 바뀌면서 무한 업데이트가 된다는 것 같은데, 어떻게 해결 해야 하나요??ㅠㅠ

[강병민]

위 코드를 수정해서 useEffect 안에 있는 코드를 함수로 만든 뒤 , 

handleArr  마지막줄에서 호출해 줬는데, 이런방식으로 써도 괜찮은 건가요??

[codingapple]

setObjArr(datas) 아마 이 부분을 밖으로 빼야 무한루프가 근본적으로 해결될듯요 

[글쓴이]

글