리액트 네이티브 앱 제작 원론. 7장 내비게이션과 고급 API

내비게이션입니다. 안드로이드앱 개발할 때는 내비게이션에 별로 신경쓰지 않았는데, iOS앱을 개발할 때는 왜 이렇게 push냐 modal이냐로 고민을 많이 하게 되는 것일까요.

결과물 (https://github.com/utrpanic/today-what-else/tree/react-native-ch7/ReactNative/RNNYT)

샘플 코드에서 선보이고 있는 NavigatorIOS와 NavigationExperimental은 현재 모두 deprecate 되었습니다. react-navigation(https://reactnavigation.org/)을 대신 사용해보다가 샘플을 계속 따라가기가 버거워져서, 다시 원복하고 대신 react-native-navigation-experimental-compat을 import 하였습니다. navigation 정보도 redux application state로 관리하는 방법을 사용하고 있습니다.

그동안 redux의 구조가 머리에 잘 들어오질 않았는데, 역시나 반복을 계속하니 나아집니다.

1. Component를 정의한다. 해당 component가 subscribe할 state를 결정합니다.
2. Container에서 mapStateToProp()을 정의한다. State가 component의 어떤 prop을 변경할 지 지정합니다.
3. Container에서 component에 action creator를 binding합니다.
4. 런타임에 상황에 따라 component가 action을 수행합니다.
5. Action 수행 결과가 미들웨어에 들렀다가 모든 reducer에게 전달됩니다.
6. 각 reducer가 대응하는 action의 수행 결과를 state로 만들어 return합니다.
7. Reducer의 return 값을 store가 받아서 state를 update한 후, connect된 component에게 알려줍니다.
8. 해당 component는 mapStateToProp()를 통해 새로운 prop을 전달받습니다.

가장 헷갈렸던 부분은 component가 update되는 시점인데, subscribe하던 state가 변경되면 자동으로 업데이트 된다고 설명되어 있었지만 더 정확히는 component의 state 혹은 props가 변경되면 component.render()가 호출되는 것입니다. 각 component가 subscribe할 state를 store가 모두 관장하는 것이 과연 더 큰 프로젝트에서도 가능한 것인지 의문이 들지만 일단은 배운대로 진행하면서 실패를 맛보는 게 좋을 것 같습니다.