[싸피 회고] 특화 프로젝트 1 - 리액트 네이티브 네비게이션

 

 리액트 네이티브를 쓰면서 제일 처음 리액트와 차이점을 느낀 부분은 리액트 네비게이션을 쓰는 것이었다. 리액트에서는 url과 url 이름을 이용해서 필요한 페이지로 링크를 타고 이동하게 했는데 앱에서는 링크의 개념이 없어 다른 방법으로 이동해야 했다. 

 

 리액트 네이티브에서는 React Navigation을 이용해서 페이지를 이동한다. 리액트 네비게이션은 NavigationContainer를 이용해 Screen name과 component를 지정할 수 있다. 이를 통해 생성된 모든 경로 구성은 내비게이터에 props로 지정된다.

 

 어떤 정보를 저장소에 저장하고 필요할 때 꺼내 쓴다는 게 힘들었다. A 페이지에서 B 저장소에 저장하고 C 페이지에서 B 저장소에서 꺼내 쓰는 건 알겠어. 근데 코드가 너무 복잡하고 헷갈려서 힘들었다. 프론트 팀원과 페이지를 나눠서 네비게이션을 만들었는데 똑같은 방법이었지만 내가 만든 페이지가 뜨지 않아 애먹었다. 결국 종류별로 네비게이터를 만든 팀원과 달리 모든 페이지를 AppNavigotor에서 생성해야만 했다. <Stack>과 <Tab>의 차이도 몰라서 더 공부해야 할 것 같았다.

---

 

프로젝트 페이지 종류

스플래시	로그인 전 메인화면
회원가입
로그인
홈(메인)	영양제 관리	OCR	영양제 추가 (OCR 결과)	알람
검색	검색 결과
추천	더 많은 영양제 추천	더 많은 영양제 추천 결과	추천 카테고리
위시 리스트
프로필(마이 페이지)	내 리뷰 보러가기	회원정보 수정
디테일

 

 

• AppNavigator : AuthNavigator, BottomNavogator, 빨간색
• AuthNavigator : 파란색
• BottomTabNavigator : 굵은 폰트
• HomeNavigator : 초록색

 각각의 네비게이터 파일에 있는 경로를 표시했다. 하위 네비게이터 파일을 만들고 AppNavgator에서 사용하려 했지만 잘 되지 않아 AppNavigator에서 설정한 페이지가 많았다. 
 BottomTab에 있는 홈 · 추천 · 검색 · 위시 리스트 · 프로필, 로그인 전 페이지를 각각 파일을 만들고 그 안에 그 페이지에서 가는 페이지의 경로를 설정하면 더 깔끔할 것 같다. 

 

navigations.ts

 

HomeNavigator 일부분

 

   SupplementInputScreen에 이름이 SupplementInput인 경로를 부여했다. Navigator는 경로를 정의하기 위해 Screen을 포함해야 한다. 스택 안에는 SupplementInput 경로가 있다. Screen은 navigate에 사용할 name props와 렌더링 될 component prop를 가지고 있다. 영양제 관리 페이지를 navigate 하고 싶을 때 SupplementInput이라는 이름을 이용해 SupplementInputScreen으로 이동할 수 있다.

 

 

 모바일 환경에서 흔하게 볼 수 있는 Tab이다. Stack과 똑같이 Navigator 안에 있는 Screen으로 경로를 설정할 수 있다.  

 

 

create 차이이다. Tab 코드가 훨씬 길어서 다른 설정을 해야하는 줄 알았는데 스타일 지정을 해야 해서 코드가 길었다. 다른 팀원이 작성한 코드도 그냥 썼구나~ 하고 넘기지 말고 이해해야겠다.

 

 

회원정보 수정 > 을 누르면 UserUPdateScreen으로 넘어가는 코드다. navigate에 있는 UserUpdate로 가라!

 

---

• 쉽게 쓰라고 이름까지 설정할 수 있는데 왜 잘 쓰지 못했을까... BottomTab이 나타나고 안 나타날 때의 차이와 상단에 뒤로가기 화살표가 나타나고 안 나타날 때의 차이를 몰라 더 멘붕이었다. 너 왜 사라져? 너 왜 있어?의 연속
• 눈 감고 뚝딱뚝딱 경로 만들고 싶지만 제대로 이해하지 않으면 힘들 거 같다. 리액트에 비해 훨씬 어려운 경로 설정이었다.