const handleSubmitBoardForm = async (event: FormEvent<HTMLFormElement>) => {
try {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const boardName = formData.get('board_name') as string;
const boardPassword = formData.get('board_password') as string;
await createBoardAxios(boardName, boardPassword);
setShowCreateBoardForm(false); // form 제출 시 form 숨기도록 상태 변경
} catch (error) {
console.error('Error creating board:', error);
}
};
await createBoardAxios(boardName, boardPassword);
setShowCreateBoardForm(false); // form 제출 시 form 숨기도록 상태 변경
이 둘의 순서가 바뀌면
useEffect(()⇒ {}, [showCreateBoardForm]); 구문에서 콜백이 일어나지 않음useEffect가 콜백되지 않는 이유는 showCreateBoardForm이 useState 훅에 의해 업데이트되기 때문입니다. 기본적으로 useState를 통해 상태를 업데이트할 때, 이 업데이트는 비동기적으로 이루어지며, 이러한 비동기적 업데이트는 useEffect 콜백이 호출되지 않습니다.따라서
showCreateBoardForm의 상태가 업데이트된 후에 useEffect가 호출되는 것을 보장하기 위해서는 handleSubmitBoardForm 내부에서 fetchBoards 함수를 호출하여 새로운 보드를 생성하고 난 후에 useEffect가 새로운 상태를 감지하도록 해야 합니다.Share article
