RN stack navigator와 screen의 재활용

잊어버리기 전에...

 

리액트 네이티브로 사이드 프로젝트를 진행하면서

에러 메시지가 명확하지 않아 문제 상황을 어렵게 유추해야하는 경우가 꽤 있다..

 

PhotoPicker <=> PhotoEditor <=> MainEditor (앱의 흐름)

 

얼마 전에는 PhotoEditor(이미지 선택 후 순서, 캡션 등을 수정할 수 있는 페이지)에서

수정을 마치고 MainEditor로 넘어갔다가,

다시 PhotoEditor로 되돌아 간 뒤 MainEditor로 되돌아가면

의도와 다르게 동작하는 문제가 있었다.

 

현재는 스크린 이동시 유지 시키고 싶은 정보를

navigation.navigate 함수의 파라미터를 통해 전달시킴으로써 유지시키고 있다.

 

어쨌든 A -> B -> C -> B -> C 에서 유지 시키고 싶은 정보는 같이 전달하면서

이동하고 있기 때문에, 도착한 컴포넌트에선 전달 받은 정보를 꺼내어 화면에 반영하면

의도대로 동작해야 하는 상황이다.

 

ex) PhotoPicker -> PhotoEditor(이미지 순서 변경 및 캡션) -> MainEditor (제목 및 본문, 메타 데이터 작성)

 

그런데 정보가 자꾸 망가졌다.

 

예를 들어, PhotoEditor에서 이미지 순서를 바꾼 뒤 해당 정보를 배열에 담아 다음 MainEditor 스크린으로 전달했다가

 

(이미지 재 수정을 원할 경우 테스트를 위해서..)

다시 PhotoEditor 스크린으로 되돌아 간 뒤,

* 물론 이 때 전달 받은 정보를 그대로 다시 전달! (여기서 문제가 생김)

 

PhotoEditor에서 정보 수정 후 다시 다음 MainEditor 스크린으로 돌아 갔을 때

바뀐 정보가 그대로 유지되지 않는 문제가 있었다.

 

예를 들어,

바뀌기 전 정보로 회귀하거나,

바꾸지 않았을 땐 그 이전에 바꿨던 때로 회귀할 때도 있었다.

 

근데 에러 메시지가 없음...

(코드 상으로는 문제가 되지 않지만, 결국 네비게이션 스택의 동작 방식에서 기인한 문제였다)

 

결국 문제 해결을 어떻게 했냐면...

 

스택 네비게이션 안에서 스크린(컴포넌트)이 쌓여가기 때문에

뒤로 가는 경우 그대로 정보(state)가 유지 되어 있을 테고,

여기서 억지로 같은 데이터를 주입할 필요가 없지 않을까? 라는 아이디어에서 출발

 

이러한 추측을 기반으로 단순히 네비게이션 스택 상에서 이미 쌓여있는 스크린으로 뒤돌아 가는 경우

정보 유지를 위한 파라미터 전달을 없앰으로써 문제를 해결했다.

 

정확한 원인은 좀 더 스터디를 해봐야 알듯...

 

여러 케이스를 관찰해본 결과

전달 하지 않아도 유지되는 정보인데, 억지로 전달 한 상태에서

유저가 데이터를 수정하면, 억지로 전달한 데이터가 숨어있다가 갑자기 튀어나와 세팅되는 느낌...?

 

어쨌든 중요한 것은,

스택 상에서 아래에 쌓인 스크린으로 되돌아 갈 때는 

RN 에서 자동으로 컴포넌트를 재활용하고, 이전의 state이 복구가 되므로

정보 유지를 위해 굳이 억지로 파라미터를 전달해서 state에 값을 할당해줄 필요가 없고

 

이 과정에서 버그가 생겼다.

 

vuex같은 글로벌한 스토어를 사용했더라면 이런 문제를 방지할 수 있지 않았을까?

따라서 이후에 데이터 관리에 대한 개선이 필요하다.