[Dap JI ] 갑자기 되던 모달이 안나오는 이유 발생

문제

 

expo sdk 업그레이드 하기 전에 잘 되던 바텀시트와 모달이 업데이트 후에 안나오는 상황이 발생.

 const [modalOpen, setModalOpen] = useState(false);
 const [reportOpen, setReportOpen] = useState(false);
 

  //리포트 모달 나오는  클릭
   const handleReportClick = () => {
   setModalOpen(false); //상세 바텀시트 옵션
     setReportOpen(true); // 신고 바텀시트 열기
   };

  //유저 차단 모달 나오는 클릭
  const handleBlockedClick = () => {
    const confirmAction = async () => {
      try {
        await fetchBoardHide(boardId); // 차단 API 호출
        router.replace(`/board`);
      } catch (e) {
        showModalHandler("alert", "다시 시도해 주세요");
      } finally {
        setModalOpen(false); // 모달 닫기
      }
    };
     setModalOpen(false);
    showModalHandler("choice", "게시글을 차단하시겠어요?", confirmAction);
  };

 
이제 이게 문제의 함수였는데, 빌드하고나서 환경이 달라진건지, sdk업데이트 하고나서 달라진건지는 잘 모르겠어요, 

아무튼 모달이 안나옴, 

 

modalOpen은 바텀시트 열리는 state임, 그래서 해당 버튼 누르면 바텀시트 열리고 그 안에 차단과 신고가 있음, 

그리고 신고 누르면 바텀시트 닫히면서 신고모달이 열리는거임, 

 

안나오길래 콘솔 찍어봤는데, 

// 1차
// 처음 상세페이지 들어왔을때
// Detailpage bottommodalOpen===> false
// Detailpage reportmodalOpen===> false
// commonModalOpen open ==> false

// 2차.
// 상세에서 바텀시트 여는 버튼 눌렀을 때
// Detailpage bottommodalOpen===> true
// Detailpage reportmodalOpen===> false
// commonModalOpen open ==> false

// 3차
// 바텀시트 안에 있는 신고 눌렀을때
// Detailpage bottommodalOpen===> false
// Detailpage reportmodalOpen===> true
// commonModalOpen open ==> false
// 바텀시트는 닫히고 신고 모달은 안나옴, 화면 뒤로갔다 들어와도 안나옴

이런 콘솔이 나왔음, 그니까 상태변화는 잘 되고 있는거라 문제가 없었음, 

심지어 뒤로갔다 해당 페이지로 다시 돌아오면 그때서야 모달이 나왔음, 

 모달 클릭 함수에서  setModalOpen(false); 을 주석처리 하니까 그때서야 신고 모달이 나왔다. 

 

setModalOpen(false); 호출이 setReportOpen(true);와 상호 작용하여 ReportModal이 나타나는 것을 방해하고 있다는 것!!

 

리액트에선 상태 업데이트는 비동기로 처리 되는데 그걸 생각 못했다. 성능을 위해 여러 상태 업데이트를 한 번의 렌더링으로 배치, React가 이를 하나의 업데이트로 처리 하기 때문에 동시에 여러 개의 setState를 호출해서 상태가  겹친 듯 싶다. 

 

근데 왜 이전에는 동작이 잘 된건지 모르겠다.. 일단 이유는 나중에 찾아보기로 하고

 

그래서 settimeout을 걸어보니 클릭함수가 동작이 잘 된다 . 2시간동안 삽질한 결과, 이유를 다른 곳에서 찾고 있었음. 

const handleReportClick = () => {
    setModalOpen(false); // 상세 바텀시트 닫기
    setTimeout(() => {
      setReportOpen(true); // 신고 바텀시트 열기
    }, 500); // 또는 약간의 지연 시간 (예: 100ms)
  };

 

일단 1차해결, 

---

근데 setimeout만 사용할 수 없으니 다음 대안을 찾아봐야함. 

 

상태를 동기처리 하려면 함수형 업데이트를 사용하면 됨, => 상태를 동기적으로 처리하게 됨, 

상태를 업데이트할 때, 현재 상태 값을 안전하게 참조할 수 있도록 업데이트 함수를 인자로 전달하는 방식입니다. 주로 이전 상태 값에 의존해서 새로운 상태를 계산해야 하는 경우

 

일단 해보고 다시 씀,