개요

바로 직전 포스트로 Stack을 통해 페이지를 작성해보는 작업을 진행하였다.
해당 내용은 이쪽에서~
그런데 여기서 한 가지 의문이 들 것이다

그래서 Stack이 뭔데?

따라서 해당 포스트에선 Navigation과 Stack의 개념에 대해 알아볼 예정이다.

1. Navigation?

Stack을 사용하기 전 가장 먼저 알아야 하는 개념이 바로 이 녀석이다.

Navigation이란, 간단히 말해서 앱에서 화면 간의 이동을 관리하는 기능이다.

• 홈, 설정 화면 등으로 이동하는 하단에 위치한 버튼 등

Getting started | React Navigation

---

1. 세팅하기

navigation 라이브러리를 사용하기 위해선 다음과 같은 기능을 설치해야 한다.

expo의 경우

1) 패키지 설치하기

• 터미널에 다음과 같이 입력하여 navigation 패키지를 설치한다

// 패키지 설치
npm install @react-navigation/native

2) 라이브러리 관리

• 프로젝트 폴더에서 다음을 실행하면, 버전에 맞는 navigation 라이브러리가 설치된다.

npx expo install react-native-screens react-native-safe-area-context

3) 코드 변경하기

• navigation 기능을 사용하기 위해선, 최상위 태그를 가 아닌, 로 묶어주어야 한다.
• 또한, navigation 사용을 위한 기능을 import 해주어야 한다.

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    </NavigationContainer>
  );
}

다음과 같이 코드를 변경하면, 이제 navigation을 사용할 준비가 완료되었다.

2. 기능 알아보기

navigetor는 Stack(스택)의 개념으로 화면을 관리한다.

• 스택(Stack): 스택은 쌓아 올리는 방식이다. 스택 네비게이터는 화면을 쌓아 올리고, 쌓인 순서대로 화면을 이동하게 한다.
• 스택 네비게이터는 앱 내에서 여러 화면을 쌓아가며 관리한다. 사용자가 새로운 화면으로 이동할 때마다 그 화면이 스택에 추가되고, 이전 화면으로 돌아갈 때는 스택의 가장 위에 있는 화면이 제거되는 개념이다.

즉, navigation을 통해 넘어가는 각 페이지를 stack으로 관리하는 것이다.
💡 Tab bar를 만들어 보면서 다양한 기능들을 알아보자.

세팅하기

먼저, stack을 사용하기 위해서 다음을 설치한다.

npm install @react-navigation/native-stack

그 다음, 메인 페이지가 될 곳에 다음과 같이 코드를 작성한다.

const stack = createNativeStackNavigator();

이 코드는 navigation 상 존재하는 페이지를 Stack으로 관리할 수 있게 해준다.

드디어 Stack!

import HomeScreen from "./screens/HomeScreen";
// screens 폴더에 HomeScreen.js 파일을 만들어 관리할 예정이다.

const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: "Home",
            headerTitleAlign: "center",
          }}
        />

이처럼, navigation으로 사용할 페이지는 Stack.Screen 태그를 통해 작성해줄 수 있디.

• name : 페이지의 이름 props ⇒ 대문자 권장
• component : 페이지가 작성된 파일
• options : navigator의 style을 변경할 수 있음

Stack은...

• Screen을 관리하는 Navigator
• 각 페이지를 담당하는 Screen(화면)

으로 이루어져 있다.

Screen을 사용하기 위해서 다음과 같이 Navigator로 감싸준다.

<Stack.Navigator
        initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: "Home",
            headerTitleAlign: "center",
          }}
        />
</Stack.Navigator>

• initialRouteName : navigation이 제일 처음에 보여줄 화면

3) Screen

스크린 Component는 몇 가지 Props를 받아온다.

그 중 가장 자주 사용되는 몇 가지만 살펴본다.

• navigation
  • navigation을 통해 다른 화면으로 이동 가능
  • navigation.navigate("Screen의 name props로 작성한 이름");
• push
  • navigation과 유사하게 화면을 이동하는 Props지만 방식이 다르다.
    • stack 형식으로 화면을 쌓아가며 이동하기 때문에, 뒤로 가기를 눌렀을 때, 이전에 머물렀던 화면으로 이동한다.
• pop / popTop

  pop

  • 뒤로 가기를 구현할 수 있는 Props
  • 이전 화면으로 이동된다.

  popTop

  • 뒤로 가기 기능 ⇒ 이전 화면이 아닌 Home 화면으로 이동한다.

• route
  • Screen에 의존값이 필요하다면, 객체 타입으로 route parameter를 설정할 수 있다.
  • route.params.id 를 통해 현재 Screen에 의존값을 받아올 수 있다.

이렇게 Navigation과 Stack에 대해 알아보았다. 이제 화면 로직에 대해 알아보았으니 본격적으로 화면을 그려볼 차레다!
또 다른 포스트로 찾아오겠다...