조회 59
김현승
Knowre 백엔드 개발자 • 2월 22일
혹시 다들 리액트 네비게이션으로 탭 기반 ux 구현하실 때 tabNavigator 안에 stackNavigator를 넣는 식으로 구현하고 계신가요? 그런데 이렇게 하면 여러 탭에서 다 사용하는 공통 화면들을 각 stackNavigator 안에서 매번 중복 정의해야하는 문제가 있는데 다들 어떻게 해결하고 계신가요? 만약 이 문제를 해결하기 위해 아예 반대로 stackNavigator 안에 여러 tabNavigator를 두는 식으로 하면 탭 전환 시에 새 화면이 뜨는 어색한 ui가 연출되는데요 보통 어떻게들 해결하고 계신지 궁금합니다~
구체적이고 정성스러운 질문에 ↑Up 투표를 눌러주세요.
설명이 부족한 질문에 ↓Down 투표를 눌러주세요. 커리어리가 질문자에게 수정을 요청할게요.
답변 1
리액트 네이티브에서 탭 기반 UX를 구현하는 방법은 다양합니다. 일반적으로는 TabNavigator 안에 StackNavigator를 넣는 방법이 많이 사용됩니다. 그러나 여러 탭에서 공통으로 사용되는 화면이 많은 경우 각 StackNavigator 안에서 중복 정의해야하는 문제가 발생합니다. 이 문제를 해결하는 한 가지 방법은, 여러 탭에서 공통으로 사용되는 화면을 별도의 StackNavigator로 분리하여 중복 정의를 방지하는 것입니다. 이렇게 하면 각각의 탭에서 공통으로 사용되는 화면을 이전에 정의한 StackNavigator에서 재사용할 수 있습니다. 이 방법은 코드 재사용성을 높이고 유지 보수성을 향상시킬 수 있습니다. 또 다른 방법은 탭 기반 UX를 구현할 때 TabNavigator 안에 여러 개의 StackNavigator를 두는 대신, TabNavigator와 StackNavigator를 함께 사용하지 않고 NavigationContainer 안에 독립적인 Screen들을 정의하는 것입니다. 이렇게 하면 공통으로 사용되는 화면을 여러 탭에서 중복 정의할 필요가 없습니다. 이 방법은 유연성이 높고 구현이 간단합니다. 마지막으로, 여러 탭에서 공통으로 사용되는 화면이 적은 경우, TabNavigator 안에 StackNavigator를 넣는 방법을 그대로 사용하는 것도 좋은 방법입니다. 이 경우 중복 정의가 발생하지 않으며 구현이 간단합니다. 따라서, 탭 기반 UX를 구현할 때는 여러 가지 방법이 있으며 상황에 따라 다르게 선택할 수 있습니다.
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직 개발자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직 개발자들의 명쾌한 답변을 얻을 수 있어요.