개요

처음 페이지를 구상할 때 하단바(Bottom-navigation)로 메인 페이지를 구상하고, 하위 페이지들은 막연히 별도로 구현하면 되겠지~ 생각했었다.

(웹 개발만 찍먹해본 자의 폐해…)

찾아보니 보통 React-native에선 대부분의 페이지를 Stack 개념으로 구현한다고 한다.

그래서 Stack이 뭔데?

이게 Stack이라는 거야~

해당 페이지에 Stack 개념을 자세히 작성해 두었으니 확인해보시라.
간단히 요약하자면 Stack은 화면을 쌓아 올리는 방식이다.

간단한 예시로, 배달의 민족에서 검색창에 특정 항목을 검색하여
검색 완료 페이지로 넘어갔다고 치자.
뒤로가기를 누르면 다시
검색창 페이지로 돌아온다.
이것이 가능한 이유는 페이지를 쌓아 올리는 Stack 방식을 사용했기 때문
(이라고 추측해본다…)

아무튼 같은 기능을 공유하는 Screen이라면 하나로 묶어서 Stack 페이지로 관리하는 편이 좋다.

그래서 어떻게 하라는 건데?

이제부터 내가 정리한 페이지 구조를 보여주겠다.

나는 현재 총 5개의 Tab이 존재하는 하단바를 구상했다.

• 홈
• 사전
• 촬영
• 추천
• 내 정보

⇒ 여기 작성한 페이지들은 각 Screen 메인 기능이 될 것이다.

이 하단바는 현재 MainBottomBar.js 라는 파일 내부에 작성되어 있다.

홈 이라는 Screen을 보자.
물론 실제로 보여줄 수 없으나(…) 현재 홈 Screen에는

• 메인 홈 Screen
• 검색창 Screen

이 두 가지의 페이지가 존재한다.
두 페이지는 서로 상호작용을 하며 이동이 가능한 Screen들이다.

그럼 이 Screen들을 Stack으로 작성하여 관리해보자!

1. 먼저 HomeStack.js 파일을 생성한다.
2. 그리고 각 페이지가 될 HomeScreen.js와 SearcScreen.js도 생성하여 Stack Component에 import 하자.

// home Screen과 관련된 하위 페이지를 구현한 Component 입니다.
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./HomeScreen";
import SearchScreen from "./SearchScreen";

이렇게 필요한 요소들을 import 해두자.

1. 이제 각 화면을 Stcak으로 관리하기 위해 Stack 변수를 선언한다.

   const Stack = createNativeStackNavigator();

2. Stack.navigatior로 Stack.Screen을 감싸고, 각 하위 스크린을 선언해준다.

// home Screen과 관련된 하위 페이지를 구현한 Component 입니다.
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./HomeScreen";
import SearchScreen from "./SearchScreen";

const Stack = createNativeStackNavigator();

export default function HomeStack() {
  return (
  // Navigator: Screen을 관리
    <Stack.Navigator initialRouteName="Home">
    // 하위 Screen을 선언
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
      ></Stack.Screen>
      <Stack.Screen
        name="MainSearch"
        component={SearchScreen}
        options={{ headerShown: false }}
      ></Stack.Screen>
    </Stack.Navigator>
  );
}

이렇게 하면 준비는 완료되었다.

이제 아까 하단바 페이지에서 Stack component를 불러와 추가해주면 된다.

// stack 페이지들을 import
import HomeStack from "./Home_Components/HomeStack";

...

<NavigationContainer>
      <Tab.Navigator
        initialRouteName="HomeTab"> // 메인으로 보여질 하단바 페이지
        <Tab.Screen
          name="HomeTab"
          component={HomeStack}
          ></Tab.Screen>
        
        ...

Screen의 Option인 component에 불러온 Stack을 넣어주면 잘 들어간 것을 볼 수 있다.

코드로만 보면 이해가 어려울 수 있기 때문에 간단한 구조를 그림으로 표현해보았다.

급히 노트를 켜서 작성한거니 느낌만 봐달라.
선언한 파일들은 다음과 같이 관리된다고 생각하면 좋다.
무한하청시스템

이렇게 페이지를 관리할 준비가 완료되었다.
이제 각 페이지를 구성하는 것은 각자의 몫이다. (따지고 보면 내 몫이기도 하다…)
화면을 구상하면서 발생한 문제나, 공유하면 좋을 내용을 구준히 업로드 할 예정이다.