맛집 앱 만들기 프로젝트 Part3 stack navigation

Stack Navigation

stack navigator라는 컨트롤러가 하위에 stack screen을 갖는데 새로운 스크린으로 이동할 때마다 Stack 맨 위에 싸여서, 순차적으로 앞뒤 화면 이동이 가능하게 해주는 기능이다

navigation 기능을 위해 AuthStackNavigator 코드 작성

[matzip/front/src/navigations/stack/AuthStackNavigator.tsx] 파일을 작성한다

해당 파일은 로그인화면이나 회원가입화면 등 여러 컴퍼넌트 페이지로 자연스럽게 이동할 수 있도록 사용되는 navigation 및 stack을 작성한다

import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {StyleSheet, View} from 'react-native';
import AuthHomeScreen from '../screens/AuthHomeScreen';
import LoginScreen from '../screens/LoginScreen';

function AuthStackNavigator() {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen name="AuthHome" component={AuthHomeScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({});

export default AuthStackNavigator;

• createStackNavigator : createStackNavigator 메서드는 Screen이랑 Navigator라는 두개의 속성을 반환하는 함수이다 위에서는 Stack이라는 변수에 담아서 Screen과 Navigator를 편하게 불러오기위해 사용되었다
• Navigator : 다른 언어에서의 라우터 기능과 비슷한 Navigator는 감싸준 Screen들(컴포넌트)을 컨트롤할 수 있도록한다
• Stack.Screen의 name과 component 프로퍼티 : name은 스크린의 이름이고 component에는 컴포넌트 이름을 적어주면된다

메인 파일인 App 코드 작성

위에서 작성한 AuthStackNavigator를 통해 스크린을 컨트롤하기위해서 시작파일인 App을 변경한다

import {NavigationContainer} from '@react-navigation/native';
import React, {useState} from 'react';
import {
  Button,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import AuthStackNavigator from './src/navigation/AuthStackNavigator';

function App() {
  const [name, setname] = useState('');

  const handleChangeInput = (text: string) => {
    console.log(text);
    setname(text);
  };

  return (
    <NavigationContainer>
      <AuthStackNavigator />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {},
  input: {},
});
export default App;

최초화면인 AuthHomeScreen 코드 작성

로그인 화면으로 이동할 수 있는 버튼을 만들어 해당 버튼에 navigation을 연결해주었다

import React from 'react';
import {Button, SafeAreaView, StyleSheet, View} from 'react-native';

function AuthHomeScreen({navigation}) {
  return (
    <SafeAreaView>
      <View>
        <Button
          title="로그인화면으로 이동"
          onPress={() => navigation.navigate('Login')}></Button>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({});

export default AuthHomeScreen;

• 컴포넌트들은 navigation이라는 props를 받을 수 있고 해당 navigation.navigate을 통해 화면 전환 기능을 사용할 수 있다 , navigation.navigate안에 값에는 이동하고 싶은 페이지 네임을 AuthStackNavigator파일에서 작성한 컴포넌트 네임으로 작성해준다

[현재까지 완성된 부분]