10월 13일 (화)_Final Project - 02 (React Native)

오늘의 프로젝트 진행 상황

1. React Native 란?

2. React Navigation 란?

3. Stack 과 BottomTab 구성하는법

1. React Native 란?

  React Native는 리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트입니다. 간단히 말하면 React를 사용하여 모바일 어플리케이션 개발을 할 수 있다고 생각하면 됩니다. 일반적으로 앱을 개발하기 위해서는 안드로이드의 경우는 Java, 아이폰은 Swift를 사용해야 하지만 React Native를 사용하여 하나의 코드로 두 경우 모두 사용할 수 있는 하이브리드 앱을 개발할  수 있게 되었습니다. 물론 이에 대한 장점과 단점이 있지만 저희는 JS 언어를 통해 모바일 앱을 개발 할 수 있으므로 React Native를 사용하여 앱을 개발하기로 하였습니다.

React Native App을 만드는 2가지 방식 ( create-react-native-app( expo ), react-native init )

create-react-native-app( expo )

1. 사람들이 사용할 법한 모든 것들을 미리 세팅

2. 세팅 변경이 어렵거나 안되는 경우가 있을 수 있음.

 

장점

1. 편하다( 맵이나 결제시스템등 제공되는 것이 많음 )

2. Mac을 사용하지 않고 App을 개발 할 수 있음. (단, 배포시에는 필요함)

단점

1. 무겁다.

2. 카메라, GPS 등 하드웨어와 연결된 것을 이용하기 어려움.

 

react-native init 의 경우는 위의 장단점을 반대로 해주면 될 듯 합니다.

 

2. React Navigation 란?

React Native의 라우팅에 있어  알아야  할 사항

1. Navigation : 모바일에서는 Navigation이 필수적임.

2. App state : 상태관리가 필요함.

3. Life cycle : React에서 사용하는 didmount 같은 것들 지원 및 will pocus, did focus, will blur 등 화면 자체의 cycle이 있음.

4. UX 구성을 사용자 편의에 맞게 작성해야함.

 

Navigation의 두가지 형식

1. Stack : 화면이 하나씩 쌓임. 뒤로가기 하면 이전 화면 나타남.

2. Bottom tab : 밑에 Nav바 같은게 있는 경우

보통의 경우 두가지를 조합하여 사용함.

 

React Navigation Intro

1. React Navigation -> JS 언어로 구현 됨.

2. React Native Navigation -> native 언어로 구현 됨.

2개가 다른 Navigation 이므로 사용시나 검색시에 유의하도록 하자.

expo에서 지원하는 네비게이션이 있으므로 확인 후 사용 ( expo install을 통해 expo에서 돌아가는 것을 사용 )

로그인 화면 이후 다른 화면으로 넘어갈 때는 로그인 관련 화면들은 Pop하고 나서 넘어가도록 해야함.

다시 돌아갈 수 있게 되면 안됨.

3. Stack 과 BottomTab 구성하는 법

  Stack과 Tab을 함께 구현하는 방법에 대해서 개념에 대한 설명은 강의를 통해 이해는 하였지만 코드로 어떻게 작성해야하는지에 대해서 막혔습니다. 강의 자체가 Version 4 기준으로 작성된 코딩이라 현재 Version 5에서는 방식이 달라졌기 때문입니다. 우선 개념에 대해서 설명드리자면 Tab을 먼저 구성한 후 Stack을 구현해야한다는 것 입니다. 각 Tab 항목마다 Stack이 쌓이는 방식으로 해야하기 때문입니다. 이를 구현하고자 오늘 많은 삽질을 하였고 결국 구현에 성공하였습니다. 아래는 구현에 성공한 코드입니다.

1. Stack 구현 ( StackScreen.js 파일 일부 )

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import Main from './Main';
import PriorityWords from './PriorityWords/PriorityWords';
import MineWords from './MineWords/MineWords';
import RegisterWords from './RegisterWords';

const MainStack = createStackNavigator();

export function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Main" component={Main} />
      <MainStack.Screen name="PriorityWords" component={PriorityWords} />
      <MainStack.Screen name="MineWords" component={MineWords} />
      <MainStack.Screen name="RegisterWords" component={RegisterWords} />
    </MainStack.Navigator>
  );
}

2. BottomTab 구현 ( Menu.js 파일 )

import React from 'react';
import {
  MainStackScreen,
  TestStackScreen,
  LoginStackScreen,
} from './StackScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default class Menu extends React.Component {
  render() {
    return (
      <Tab.Navigator>
        <Tab.Screen name="Login" component={LoginStackScreen} />
        <Tab.Screen name="Home" component={MainStackScreen} />
        <Tab.Screen name="TEST" component={TestStackScreen} />
        <Tab.Screen name="내정보" component={TestStackScreen} />
      </Tab.Navigator>
    );
  }
}

3. App.js 파일에서 랜더링

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Menu from './Menu';

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Menu />
      </NavigationContainer>
    );
  }
}

 

  보시는 바와 같이 결국 중요한 점은 App.js 에 Tab으로 구현한 Navigator 의 component에 Stack으로 구성된 함수를 넣어야 된다는 것이였습니다. component에 이런식으로 함수를 넣는 방법을 생각하지 못해 구현에 시간이 많이 걸렸었습니다.

 

  오늘까지 프로젝트를 진행한 결과 전체적인 컴포넌트 구성을 마치고 그것들을 라우팅처리하는 것까지 완료하였습니다. 간단하게 구성된 앱 화면은 내일 정리해서 올리도록하겠습니다. 오늘 하루도 수고 많았습니다. 내일 뵙겠습니다. Good Night~~!