우선, 차이가 뭔지 알아보자
1. Stack Navigator
Stack Navigator | React Navigation
Stack Navigator | React Navigation
Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.
reactnavigation.org
- native가 아니라 js로 구현된 것
- 따라서 각 플랫폼의 navigation을 사용하지 않는다
- native로 구현된 것보다 성능이 안좋을 수 있음
- JavaScript 구현으로 인해 대규모 애플리케이션 또는 복잡한 전환 효과를 사용할 때 성능 저하가 발생할 수 있음
- JavaScript 기반이므로 개발자가 더 많은 유연성을 가지고 UI와 전환 효과를 사용자 정의할 수 있음
npm install @react-navigation/stack
2. Native Stack Navigator
Native Stack Navigator | React Navigation
Native Stack Navigator | React Navigation
Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.
reactnavigation.org
- native API로 구현된 것
- ios의 UINavigationController, android의 Fragment 사용
- 따라서 native로 만든 어플과 동일한 방식으로 작동한다
- 네이티브 코드로 실행되기 때문에 화면 전환과 애니메이션에서 더 우수한 성능을 제공
- 단, js로 구현된 stack navigator에 비해 커스텀할 수 있는 영역이 약간 줄어든다
npm install @react-navigation/native-stack
프로젝트가 요구하는 조건에 따라 적절히 선택해서 쓰자!
