[LAB-13] 모달창 메시지 렌더링 이슈

질문 작성자

함채원

문제 상황

Mar-23-2023 11-48-43

파이어베이스에 저장된 이메일을 입력하면 비밀번호 재설정 이메일을 전송하는 부분을 제작 진행중입니다. (입력된 이메일 : test@test.co.kr, test1@test.co.kr)

메일은 잘 전송이 되는 상황인데, 이후 모달창 메시지를 오류 상황에 맞게 변경하는 작업을 하는데 문제가 있어 도움을 요청합니다

처음 이메일을 입력한 후 확인을 누르면 모달창 내 원하는 메시지가 잘 뜨는데, 그 이후부터는 이전메세지가 한번뜨고 그 이후에 원하는 메세지가 뜨는 상황입니다.

현재 모달창 확인 버튼을 누르면 state를 reset 을 시켜도 변화가 없습니다.

렌더링 순서 떄문에 생기는 문제 인 것으로 추측 되나 해결이 어렵습니다 ㅠㅠ

프로젝트 저장소 URL

https://github.com/chaewon0128/LAB13-PROJECT/tree/feature/chaewon/find-password

브랜치명 : feature/chaewon/find-password

환경 정보

운영체제 정보 (예: Windows, macOS)
Node.js 정보 (예: v16.14.0)
라이브러리 정보 (예: React v18.0.2)

문제 상황

메일은 잘 전송이 되는 상황인데, 이후 모달창 메시지를 오류 상황에 맞게 변경하는 작업을 하는데 문제가 있어 도움을 요청합니다.

처음 이메일을 입력한 후 확인을 누르면 모달창 내 원하는 메시지가 잘 뜨는데, 그 이후부터는 이전메세지가 한 번 뜨고 그 이후에 원하는 메세지가 뜨는 상황입니다. 현재 모달창 확인 버튼을 누르면 state를 reset 을 시켜도 변화가 없습니다.

렌더링 순서 때문에 생기는 문제 인 것으로 추측 되나 해결이 어렵습니다 ㅠㅠ

문제 해결

아래는 문제가 해결된 화면입니다. 😃

이메일 정보를 찾을 수 없는 경우, 모달 다이얼로그 메시지

이메일 정보를 찾은 경우, 모달 다이얼로그 메시지

문제 해결을 위한 이해

문제 해결과 관련된 이전 답변을 먼저 검토해보면 해결을 위한 실마리를 얻을 수 있습니다.

문제 해결 방법은 isModalOpen 상태 값이 변경 됨을 useEffect 훅의 종속성 배열로 감지한 후 이펙트 콜백 함수를 실행 시킵니다. 그리고 isModalOpen 상태가 true인 경우 입력된 이메일과 isVisible 상태를 업데이트 시도합니다. 그러면 위에서 살펴본 결과대로 화면에 렌더링 됩니다. 😀

const onClickHandler = async e => {
    e.preventDefault();
    await resetPassword(email);
    setIsModalOpen(true);
  };

  useEffect(() => {
    if (isModalOpen) {
      setEmail('');
      setIsVisible(false);
    }
  }, [isModalOpen]);

yamoo9 / likelion-FEQA