오늘의 오류
useEffect + setState 무한 요청 제발 그만
삐옹
2022. 7. 18. 22:00
어떤 문제점을 겪었는가?
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를 업데이트하여 자동으로 화면에 뿌려준다.