[React Native] 네비게이션 과정에서 화면 프리징 문제 트러블슈팅 | Modal 컴포넌트 생명주기, mount와 unmount

앱 구현 과정에서 문제가 하나 발생했다.
A 화면에서 B 화면으로 이동 후, 다시 A로 goBack() 하게 되면 화면이 그대로 얼어버린 것처럼 어떤 터치도 먹히지 않았다. 

처음에는 화면 전환 과정에서 포커스가 제대로 돌아오지 않는 건가 싶어 useFocusEffect() 훅을 사용해 디버깅을 시도해보았지만, 네비게이션을 이리저리 테스트해봐도 포커스 전환에는 아무런 문제가 없었다.
navigation.getState()를 사용해 화면 전환이 일어날 때마다 route 로그를 찍어봐도 별다른 예외 사항은 보이지 않았다.

그러다 발견한 문제 원인.
B 화면에서 "모달을 열고 닫은 후" A 화면으로 돌아오면 화면이 멈춘다.

화면 전환 이후에도 모달이 여전히 렌더링되면서 터치를 차단하고 있었다.
리액트 네이티브에서 Modal 컴포넌트는 화면 위에 독립적으로 렌더링되기 때문에 `visible={false}`가 되어 모달이 닫히더라도 컴포넌트 자체는 언마운트 되지 않고 렌더 트리 상에 남아 있는다.

이 때문에 모달이 닫히고 이후 다른 화면으로 전환 되더라도 모달 View가 여전히 화면 영역을 차지하게 되면서 터치 이벤트를 막는다는 것.. 즉 모달이 닫힌 것처럼 보여도 마운트된 걸로 인식되어 화면에 존재하는 것처럼 영향을 준다는 것이다.

오래 헤맨 것치고 해결법은 의외로 간단했다.
Modal 컴포넌트 자체에 조건부 렌더링을 추가해서 아예 Modal 컴포넌트를 렌더 트리에서 빼버리도록 만드는 것!

if (!isModalOpen) return null;

return (
  <Modal
    animationType="slide"
    transparent={true}
    visible={isModalOpen}
    onRequestClose={closeModal}
  >
    (...)
  </Modal>
);

 

이 한 줄.. 이 한 줄 때문에 얼마나 많은 시간을 뺑이ㅊ... 후
이걸 왜 놓쳤을까

반성반성