useEffect + setState 무한 요청 제발 그만

어떤 문제점을 겪었는가?

 POST 요청으로 게시글을 추가하고,

useEffect를 이용해 게시글 목록을 가져오는 GET 요청에서 무한 요청이 걸렸다.

좀더 두면 노트북이 터져버릴 것 같아 서둘러 브라우저를 닫아버렸다.

왜 이런 문제가 발생했는가?

 

POST요청

const [allBoard, setAllBoard] = useState([]);

...

// board 생성
  const handleSubmit = (e) => {
    e.preventDefault();
    axios({
      method: "post",
      url: "http://54.180.29.68/api/post",
      data: data,
      headers: {
        Authorization: `Bearer ${getItemFromLs("myToken")}`,
      },
    })
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

 

GET요청

// 보드 목록 조회
const [allBoard, setAllBoard] = useState([]);

..

useEffect(() => {
    axios
      .post(
        "http://54.180.29.68/api/post/all",
        {
          workSpaceName: getItemFromLs("workspace"),
        },
        {
          headers: {
            Authorization: `Bearer ${getItemFromLs("myToken")}`,
          },
        }
      )
      .then((res) => setAllBoard(res.data.posts))
      .catch((err) => console.log(err));
  }, [allBoard]);

POST 요청 -> allBoard 업데이트 -> useEffect 실행 -> allBoard 업데이트 ->  useEffect 실행 ... (무한반복)

 

시도해 본 방법은 무엇인가?

1. window.location.reload()

• useEffect의 두 번째 요소로 빈배열을 넣으면 useEffect의 콜백함수가 화면이 처음 렌더링 될 때 딱 한번 만 실행된다.
  그 특성을 이용해 화면을 강제로 리로드시켜 업데이트를 일으켰다.
  성공은 했지만 이럴거면 리액트를 왜써.. 깜빡임없는게 리액트의 매력인데..

어떻게 해결했는가?

 

Post 요청의 결과가 성공일 때 게시글 목록을 업데이트(setAllBoard) 하게끔 처리 해준다. + useEffect( + 빈 배열)

맨 처음 렌더링 시 게시글 목록을 불러와 화면에 한번 뿌려주고,

그 이후부턴 생성 요청이 잘 이루어지면 바로 게시글 목록 state를 업데이트하여 자동으로 화면에 뿌려준다.