React Native 몇몇 애매한 오류 메시지 관련

아래 두가지 오류에 대해 정리해보면

첫번째 것은 navigate 메소드를 사용하고 resetRoot 를 사용하지 않으면 해결되었고

두번째 것은 그냥 내가 로직을 잘못짜서 그런 것이었다.

 

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

=> 컴포넌트가 이미 사라졌는데 그 이후에 해당 컴포넌트의 상태값을 변경하는 로직이 수행될 경우 발생할 수 있다. 메모리 누수가 발생할 수 있다고 경고 메시지를 보여준다. 나의 경우 서버에서 리스트 데이터를 받아와서 몇몇 변환을 거쳐 상태값에 셋팅하여 리스트를 보여주는 메인 화면이 있는데 로그인이 미완성일 경우 강제로 프로필 수정 화면에서 나머지 정보를 모두 입력하도록 강제 화면 전환을 하는 경우에 이러한 에러가 보였다. 메인 컴포넌트가 리스트 데이터를 받아와서 셋팅하는 도중에 강제로 화면이 전환되어 나타나는 오류 메시지였다. 이때 navigationContainer 의 resetRoot 를 통해서 강제 리셋을 해주었는데 이것이 이런 오류를 발생시키도록 할 수 있다. navigate('ProfileEditScreen') 이런식으로 해주면 오류가 안 나는 것으로 보아 navigate 메소드를 통할 경우 메인뷰에서 하던 해당 셋팅 작업 같은 행위는 다 완료한 뒤에 화면 전환을 하도록 되어 있는 듯 보인다. 대신 중간 중간 회원가입을 위한 과정들이 존재했을 경우 프로필 필수 정보 입력 완료 후에는  navigation.popToTop() 과 같은 메소드로 메인으로 돌아가야 한다.

사실 에러 메시지는 useEffect 에서 이벤트 리스너 등록하고 useEffect 의 함수에서의 리턴값으로 돌려주는 함수 안에 이벤트 리스너 등록한 것을 해제해주는 코드가 없을 경우 자주 발생한다.

 

Error causing app to hang : Could not locate shadow view with tag #4405, this is probably caused by a temporary inconsistency between native views and shadow views

(https://spectrum.chat/react-native/help/error-causing-app-to-hang-could-not-locate-shadow-view-with-tag-2123~f171bc46-7823-40c4-b803-af94fa54f9e4)

(https://www.bountysource.com/issues/51179503-bug-warning-could-not-locate-shadow-view-with-tag-3050-this-is-probably-caused-by-a-temporary-inconsistency-between-native-views-and-shadow-views)

(https://github.com/aksonov/react-native-router-flux/issues/2595)

(https://github.com/react-navigation/react-navigation/issues/4008)

(https://github.com/react-navigation/react-navigation/issues/3767)

해석해 보면 네이티브 뷰랑 쉐도우 뷰랑 일치가 되지 않아서 나는 오류라고 해석된다. 일종의 가상돔 과 실제뷰의 fetch 과정에서 오류가 난 것 같다. 위의 링크들을 보면 한가지 경우에만 이런 오류를 내는 것 같지는 않고 react-navigation 과 SafeAreaView 와의 사용에 있어 FlatList 를 사용시 그 안에 공간이 뜨는 버그 같은 것이 있어보이는데 (현재 나는 사용하는데 아무 문제없이 사용하고 있는데 과거 이슈인가?) 이럴 때도 이러한 에러 메시지가 뜬다고 하는 듯 하다.

나의 경우는 여러가지 종합해보았는데 디버그 모드를 활성화 시켰을 경우 RootNaviationContainer 부분에서 가입 직후 프로필 필수 정보 미입력된 상태일 경우 강제로 ProfileEditScreen 으로 이동하게 할 경우 resetRoot 를 사용하였는데 이 때 메인뷰인 User 들을 FlatList 에 서버로 부터 받아와서 뿌려주는 로직 수행 중간에 화면을 강제로 이동시키므로 이것보다 위에서 언급한 Can't perform a React state update on an unmounted component.  이 경고와 같은 오류가 발생하고는 디버그 메뉴가 CMD+D 로 뜨지 않는 현상과 같이  디버그 모드에서 약간 오류현상이 발생하였는데 이것도 또한 아마도 이러한 것과 연관이 있어보인다.

문제시 된 부분은 ProfileScreen 에서 ProfileEditScreen 으로 수정 버튼 누를 경우 이동하여야 하는데 자꾸 Error causing app to hang : Could not locate shadow view with tag 이 에러나면서 진입이 안되는 현상 때문이었다. 그런데 이유는 이 에러와 관련 있는 것은 아니었고 이 에러 메시지는 그냥 그냥 그로 인해 뭔가 일어남으로서 나타나는 메시지일 뿐

Done 상태값을 통해서 업데이트 완료 클릭 후 프로필 화면으로 돌아가도록 하는 로직에 있어 이미 프로필 수정을 완료하고서 뒤로 가기를 통해 프로필 화면이 된 상태에서 다시 수정 버튼으로 프로필 수정 화면으로 이동하고자 할 경우 useEffect 안의 이러한 정보들로 인해 자꾸 진입하기 전에 뒤로가기가 되어 버리는 현상. 즉, 라이브러리 들 자체의 문제들은 없고 내가 useEffect 안에 그렇게 되도록 로직을 짜놨기 때문에 이런 일이 있었다!!