Capstone#3. Kotlin대신 React Native를 선택한 이유 / React Native 뼈대 잡기(Navigation 설정 및 폴더 구조)

 

 

 

안녕하세요.

오늘은 벌써 저의 Capstone을 설명하는 세 번째 시간이네요!

일단 저희는.. 어떠한 커뮤니티 어플을 제작하였어요

어떤 커뮤니티인지는 나중에 따로 포스팅할게요 ^__^

 

암튼 저는 프론트 개발을 전부 맡게 되었는데

그래서 제가 어떤 스택을 사용할지 결정할 수 있는 결정권이 있었어요.

 

지금까지 안드로이드 어플을 만드는 스택은 Kotlin, React Native 두 가지를 경험해 보았는데

둘 중에 뭘로 할까... 고민하다가 

React Native 를 선택하게 되었어요.

 

왜냐하면

 

왜 React Native를 선택하였는지?

 

 

저는 React Native보다 Kotlin이 좀 더 미숙했어요.

그래서 기회에 좀 더 깊게 공부해 보자!라는 느낌으로

Kotlin을 외쳤지만 막판에 React Native로 해야겠다.. 해서 계획서를 수정해서 제출하였죠..ㅋㅋ

 

두 가지 이유가 있었는데

 

첫 번째는, 저는 혼자 프론트 업무를 다 맡게 되어서

빠른 시간 안에 화면을 다 만들어야 한다는 임무가 있었어요!

빠르게 개발해야 하는 상황에서 React Native의 Hot reload 기능 못 잃어...

 

코틀린은 자동 재로드 기능이 좀 느려요 한참 로딩 되는 경우도 많아서

좀 답답했던 경우가 많은데

React Native는 아주 빠르게 바뀌거든요! 

이게 너무 좋았어요

일단 React Native의 개발속도가 더 빠르다

이게 첫 번째 이유이고

 

두 번째 이유는 저희가 Firebase로 일부 서버를 구현하기로 했었는데,

Firebase 에는 React Native 가 좀 더 호환이 잘된다??라는 말이 있어요!

 

https://rnfirebase.io/

 

특히 이런 React Native랑 Firebase와 연동해서 사용할 수 있는 기능들을 보니

결정하기에 더욱 쉬웠던 거 같습니다.

 

 

React Native 기본 뼈대 잡기( navigation 설정 및 폴더 구조) 

 

 

우선 프로젝트를 시작하기 전 저는 navigation먼저 설정해 주었어요.

navigation이 프로젝트의 기본 뼈대를 잡아준다는 느낌이 있어서

 

일단 navigation이 딱~ 무게를 잡아주면 뭐랄까 프로젝트의 절반이 완성되었다는 느낌이...(아님)

 

고려해야 될 사항은 프로젝트마다 달라요

일단 아래 사진은 제가 제작한 figma 기획안입니다 ㅎ

 

 

 

디자인하는 게 은근히 재미도 있으면서

어렵더라고요

그래도 뭔가 이런 간단한?? 디자인은 재미난 거 같아요

로고도 다 직접 제작했어요!

 

 

어떤가요?

ㅋㅎㅎ

앙증맞으면서...

아 참, 로고는 캔바로 제작했어요...ㅋㅋㅋㅋ

요즘 캔바, 미리캔버스 기능이 엄청 좋더라고요 👍👍

 

 

머 암튼!

저는 크게

 

- 시작화면

- 로그인/회원가입 화면 

- 메인화면

 

세 가지의 stack으로 나누어야겠단 생각을 하였어요

 

 

여기서 아주 살짝 고려해야 할 점은

메인화면에서만

 

 

 

이런 bottom navigation이 보이게 되는데 

메인화면 안에서도 bottom navigation이 보이는 화면이 있고

bottom navigation이 안 보이는 화면이 있을 거 아녜요

 

그래서 MainStack.Screen 스택 안에

MainBottomScreen이라는 Tab.Navigator을 만들었어요!
이게 곧 스택 안의 또 다른 내비게이터가 있는 형태인 거죠

 

코드로 살펴보면

 

export default function AppStackNavigation() {

  return (
    <AppStack.Navigator>
      <AppStack.Screen
        name="StartScreen"
        component={StartScreen}
        options={{headerShown: false}}
      />
      <AppStack.Screen
        name="AuthStack"
        component={AuthStackNavigation}
        options={{
          headerShown: false,
        }}
      />
      <AppStack.Screen
        name="MainStack"
        component={MainStackNavigation}
        options={{headerShown: false}}
      />
    </AppStack.Navigator>
  );
}

 

이건 가장 큰?

가장 뼈대가 되는 앱의 stack 이죠

 

위에서 말한 시작화면, 인증 화면, 메인화면으로 스택을 세 개 쌓아줘요

시작화면은 화면이 하나라 그냥 바로 메인 스택에 넣어주었고

 

export default function AuthStackNavigation() {
  const AuthStack = createNativeStackNavigator();

  return (
    <>
      <AuthStack.Navigator>
        <AuthStack.Screen
          name="LoginScreen"
          component={LoginScreen}
          })}
        />
        .
        .
        .

 

 

 

로그인/회원가입 스택은 화면이 여러 가지라

이렇게 스택들을 정의해 줘요

 

export default function MainStackNavigation() {
  const MainStack = createNativeStackNavigator();

  return (
    <>
      <MainStack.Navigator>
        <MainStack.Screen
          name="MainBottomScreen"
          component={MainBottomScreen}
          options={{headerShown: false}}
        />
        <MainStack.Screen
          name="ProfileSettingScreen"
          component={ProfileSettingScreen}
			.
            .
            .

 

 

다음은 메인화면!

위에서 말한 고려사항을 해결하기 위해

 

export default function MainBottomScreen() {
  const Tab = createBottomTabNavigator();

  return (
    <View style={{height: '100%'}}>
      <Tab.Navigator
        initialRouteName="메인화면"
       			.
                .
        })}>
        <Tab.Screen
          name="채팅"
          component={ChattingRoomListScreen}
        		.
                .
        />
        <Tab.Screen
          name="메인화면"
          component={HomeScreen}
          		.
                .
        />
        <Tab.Screen
          name="프로필"
          component={ProfileScreen}
         		.
                .
        />
      </Tab.Navigator>
    </View>
  );
}

 

 

설명을 위해 다른 옵션들은 지웠어요!

여기 Tab.Navigator 화면을 만들어 각각 넣고 싶은 스크린들을 정의하면 됩니다!

 

여기에 들어가는 Stack 부분에는 Bottom navigation이 표시되겠죠?

Bottom navigaion이 필요하지 않은 메인 스택의 화면들은

MainStackNavigation에 추가로 정의해 주면 됩니다!

 

 

끝~~

 

여기서 name으로 정의해 둔 화면으로

자유롭게 화면 간 이동이 가능해집니다!

 

 

이걸 우선 정의하고 나서...

다음으로는 폴더 구조를 정의해 두었어요

 

 

프로젝트 기본 구조

 

 

src
 ├── network
 │       └── client
 │               ├── api-endpoint.js
 │               ├── http-client.js
 │               └── index.js
 ├── assets
 │   └── images
 ├── components
 │   └── AuthStackComponent
 ├── constants
 │    ├── colors
 │    └── data
 ├── navigation
 ├── redux
 │    ├── slices
 │    └── store
 ├── screens
 ├── utils
 │   └── constants
 ├── styles
 ├── App.tsx
 ├── index.tsx
 └── serverAccountKey.json

 

 

http통신은 network단에 따로 

asset폴더엔 이미지

component 폴더엔 각종 컴포넌트들

constants 폴더엔 colors, data 들

navigation

redux

screens

utils

styles

폴더로

폴더를 정의해 두었어요

 

 

오늘의 포스팅 끝!

 

 

다음 포스팅시간에 봅시당~~~