React Native Expo 앱 실행 시 강제종료 되는 현상

가끔 Expo 프로젝트를 실행할 때 웹은 문제가 발생하지 않는데 ExpoGo 앱에서는 아예 에러로그를 볼 새도 없이 앱이 강제종료가 되는 경우가 있습니다.

바로 강제종료되는 Expo 앱...

 

이럴 경우에는 뭐가 문제인지도 알 수 없어서 솔직히 저같은 초보자는 특히나 뭘 수정해야하는지 직접 찾아보는 수 밖에 없죠... :(

 

이전에 웹에서 Expo 프로젝트를 실행하는 방법을 설명할 때도 썼지만 이렇게 웹에서는 잘 실행되더라도 앱으로는 실행되지 않는 것들이 있습니다. 저의 경우는 style에서 문제가 발생했습니다. 저는 원래 웹개발을 주로 하다보니까 웹에서 사용하던 것들이 당연히 있겠지 하면서 습관적으로 작성하다보니까 발생했습니다...

 

존재하지 않는 요소로 작성한 style로 웹이랑 앱으로 각각 실행 시에 이렇게 웹에서는 문제없이 작동하지만 ExpoGo에서 아예 프로젝트를 새로 실행할 때 강제종료가 됩니다. 

문제 코드인 justifyContent는 left라는 요소가 없다.

문제 코드 웹에서 실행 시

문제가 되는 코드 실행 시

 

이처럼 요소 자체가 존재하지 않는 style 적용 시 앱이 강제종료 되는 것을 볼 수 있습니다. 그래서 올바른 코드로 작성하기 위해 justifyContent를 flex-start로 수정하면 정상적으로 웹과 앱 둘 다 실행되는 것을 볼 수 있습니다.

올바른 코드로 수정

수정한 코드로 웹에서 실행 시

수정한 코드로 앱에서 실행 시

 

다만 존재하지 않는 요소로 작성된 style을 사용하더라도 기존에 해당 프로젝트를 이미 실행중이었어서 리로딩하는 경우에는 강제종료가 아닌 에러로그가 출력되는 것을 확인할 수 있습니다.

예시)

Expo 앱에서 실행 중인 프로젝트를 리로딩하는 경우

Expo 앱을 처음 실행해서 기존에 새로 프로젝트를 실행할 때

 

그러므로 저는 웹으로만 React Native 프로젝트를 해보는 건 추천하지 않습니다. 에뮬레이터 설치하고 설정하거나 핸드폰에서 실행하시는게 다소 번거롭더라도 가능하시다면 Expo 앱을 이용하시길 추천드립니다.