[RN] 앱을 만들어보자, React Native! - Navigation .02

안녕하세요! RyuWoong입니다.

이번 이야기는 화면 전환과 설계에 관한 이야기 입니다. React Native(이하 RN)에서 든 Web에서든 빠질 수 없는 것이 Router 역할인데, RN에서는 Navigation을 사용합니다. 몇 개의 라이브러리가 있지만 저는 React Navigation을 주로 사용하기 때문에 해당 라이브러리 위주로 설명하겠습니다! 

---

Navigation의 종류

주로 사용하는 Navigation의 종류는 3개 정도로 아래와 같습니다.

- Stack 

- Bottom Tab

- Drawer

 

각 Navigation의 기본 적인 사용법은 라이브러리 홈페이지에 설명이 잘 되어 있어 생략합니다. 추가적인 질문이 있으시면 댓글로 남겨주세요.

 

---

Stack Naviagtion

먼저 가장 메인이 되는 Stack Navigation에 대해 알아보도록 합시다!

Stack Navigation은 Stack 방식으로 화면이 차곡차곡 쌓이는 Navigation 입니다.

우리가 리스트에서 아이템을 선택하거나, 장바구니 등 이동해야하는 경우가 발생하면 해당하는 화면을 생성하고 Stack 가장 상단에 쌓음으로서 해당 화면이 나타나며 보여지게 됩니다.

Stack Navigation 내 화면을 컨트롤 하는 다양한 방법이 있지만 주로 사용하는 메소드는 아래와 같습니다.

 

- push (Screen을 Stack 맨 위에 추가하고 보여줍니다.)

- goBack (pop과 비슷한 역할을 합니다. 해당 Screen을 날리고 이전 Screen을 보여줍니다.)

- navigate ( Screen을 Stack 맨 위에 추가하고 보여줍니다. 만약 Stack내에 해당 Screen이 있으면 그 Screen으로 포인터를 옮깁니다.)

- replace (현재 보이는 화면은 지우고 대체하는 새 Screen을 보여줍니다.)

- reset ( 새롭게 Stack을 구성할 수 있습니다. )

 

이것만 있으면 대부분의 화면 전환이나 이동을 해결할 수 있습니다! 또 navigate 또는 push 시에 state 전달이 가능하고, reset과 dispatch를 이용하면 좀 더 복잡하게 상태를 변경할 수 있습니다.

 

push와 navigate는 어떤 경우에 각각 사용하나요?

push는 Stack내 해당 스크린 여부와 상관 없이 항상 새로운 화면을 Stack 맨 위에 추가 합니다. navigate는 Stack내 해당 스크린이 있다면 해당 화면을 맨 위로 올립니다. 없다면 새로운 화면을 Stack 맨 위에 추가합니다.

따라서 일반 적으로는 navigate를 사용합니다. 하지만 Stack에 같은 Screen 이지만 전달한 state가 달라 history로 기록되게 하고 싶다면, push를 사용하면 됩니다.

 

 예 ) 상품 상세 내에 다른 상품들을 둘러볼때는 push를 이용하여 Stack을 계속 쌓는 방식을 이용합니다. 뒤로가기시 이전에 봤던 상품들이 나타나게 됩니다.

---

Bottom Tab Navigation

Stack Navigation과 함께 사용하는 경우가 많은 Navigation입니다. Bottom Navigation을 같이 사용하게 되면 기획&설계단계부터 신경을 써야할 필요성이 있습니다.

예를 들어 Home 화면을 제외한 나머지 화면에서는 Bottom Tab 보이지 않는다면 아래와 같이 코드를 구성할 수 있습니다. Stack Navigation내에 Bottom Navigation이 홈화면으로 구성되어있습니다.

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

위와 같이 구성하면, Tab은 Home,Feed, Notificateions 에서만 나타나며 Profile, Settings에서는 보이지 않게 됩니다. 반대로 Bottom Navigation이 다양한 곳에서 노출되어야 한다면 설계가 복잡하게 됩니다.

 

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function FeedStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Feed" component={Feed} />
      <Stack.Screen name="FeedDetails" component={FeedDetails} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Feed" component={FeedStack} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

반대로 Bottom Tab 내부에 Stack이 들어가게 됩니다. 이런 설계가 되면 Stack Navigation이 각각 독립적인 형태가 되어 HomeStack에서 있는 Screen을 FeedStack에서 자연스럽게 사용하기 위해선 FeedStack에도 추가해줘야 하기 때문에 화면 수가 많아질 수록 특히 공통으로 사용하는 화면수가 많아질 수록 Navigation 설계가 복잡해집니다. 따라서 웬만하면 Stack 내 Bottom Tab이 들어간 설계를 사용 할 수 있도록 하는 것이 좋다고 생각합니다. (Home에서 한 단계라도 깊어지면 Bottom Tab이 보이지 않는 설계)

 

그리고 Bottom Tab에는 꽤 많은 옵션이 존재합니다. 해당 탭을 Focus 하지 않을 때 메모리에 두지 않고 날려버린다던지, 첫 Rendering 될 때 모든 탭을 다 Redering한다던지.. 유용한 옵션이 많으니 잘 해서 사용합시다.

---

Drawer Navigation

흔히 메일 앱에서 자주 볼 수 있는 Navigation입니다. 최근 사용하는 빈도가 줄어든 유형인 것 같습니다.

점점 앱이 간단하고 명확한 느낌의 UIUX를 선호해서 그런지 몰라도 여러 앱을 구경하거나 새로운 프로젝트 시에도 잘 쓰이지 않는 느낌이 들더라구요. 설계는 Bottom Navigation과 유사합니다. 이것도 Drawer 내부에 Stack 들어가는 구조가 되면 복잡해질 우려가 있습니다.

 

---

대략적인 Navigation에 대해서 설명을 했습니다.

추가적으로 더 이야기 드리자면, 저는 Stack과 Bottom Tab의 header는 꺼버리고 따로 만들어서 사용합니다. 그래야 커스텀하기 훨씬 수월하다고 생각합니다. 그리고 react-native-safe-area-context 라이브러리를 의존성으로 함께 설치하게 되는데, 기존 RN에 포함된 SafeArea에 비해 옵션이 다양하며 노치나 하단바텀 마진 값을 제공해주는 기능을 지원하니 참고하세요!

 

추가적인 질문은 댓글에 남겨주시면 감사드리겠습니다~