리액트 네비게이션 (react navigation) 으로 리액트 네이티브 화면 전환하기

리액트 네이티브 화면 전환 방법은?

리액트 네이티브에서 화면을 옮겨다디고 싶다면, 어떤 선택지가 있을까?

다음 두가지 패키지를 고려할 수 있다.

1. react-navigation
2. react-router-native

react-navigation

조금 더 앱에 적합한 기능을 많이 가지고 있다.
사실상의 대세이다.

react-router-native

기존에 웹에서 사용하던 react-router 와 사용법이 비슷하여 편리하다.
웹처럼 주소기반의 화면이동이 가능하다.

react-navigation 설치하기

사람들이 많이 사용하는 것이 보통 레퍼런스가 많으니 대세를 따라 react-native 를 설치하는 것이 일반적인 방법이다.

https://reactnavigation.org/docs/getting-started 이 공식문서를 읽고 차근차근 따라하여 설치하고 이용해볼 수 있다.

npm 의존성 설치하기

npm i @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context
npx pod-install # mac 인 경우에만! darwin machine 전용

/android/app/src/.../MainActivity.java 파일에 코드 추가하기

// import 들 ...

/* 리액트 네비게이션 이용을 위해 추가 */
import android.os.Bundle;

public class MainActivity extends ReactActivity {

  // 다른 자동 생성된 초기 코드들...

  /* 리액트 네비게이션 이용을 위해 추가 */
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
}

/android/build.gradle 파일에 코드 추가하기

buildscript {
    ext {
        ...
        kotlin_version = '1.6.10'
    }
    dependencies {
        ...
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

react-navigation 사용 방법

소스코드 작성해보기

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: "홈" }}
        />
        <Stack.Screen name="Details">
          {(props) => <DetailsScreen {...props} />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

계층형 구조

• NavigationContainer
  • Stack.Navigator
    • Stack.Screen
• 소스코드를 작성할 때는 위와 같은 계층형 구조로 작성하면 된다.
• 컨테이너라는 큰 개념이 있고, 내부에 네비게이터가 있고, 네비게이터는 내부에 포함된 스크린들을 왔다갔다할 수 있다.
• 화면이 실제로 보이지 않더라도, Navigator 내부에 사용할 화면을 전부 깔아놓긴 해야 한다.

Stack.Screen 의 기본 사용법

Stack.Screen 은 위에서 보다시피 2가지 형식으로 사용이 가능하다. Home 과 Details 는 형식이 약간 다르다. 그러나 일반적으로는 HomeScreen 컴포넌트를 렌더링하듯 사용하는 방식이 일반적이다.

화면을 전환하는 방법 (navigation)

Stack.Screen 이 component 속성을 통해 화면을 가져가면서, prop 오브젝트를 전달하고 내부에 navigation 이라는 속성을 넣어 제공하는데, 이 속성을 통해 화면 전환이 가능하다.

navigation.navigate(`${화면 이름}`)

위와 같은 코드를 통해 화면 전환이 가능하다. 아래의 완성 코드에서 useCallback() 부분에 어떻게 사용하는지 정확히 나와있다.

props 오브젝트 내부에는 navigation 외에도 route 라는 속성도 제공된다. route-prop 사용법 공식문서 와 navigation-prop 사용법 공식문서 를 통해 사용법을 배워볼 수 있다.

props 공식문서 초기에는 아래와 같은 내용이 나온다.

Each screen component in your app is provided with the navigation prop automatically. The prop contains various convenience functions that dispatch navigation actions.

"매 스크린 컴포넌트는 자동으로 navigation prop 이 제공된다. prop 에는 다양한 편의 함수가 포함되어 있다."

또한 타입스크립트의 타입에도 나와있긴 한데, 유심히 보지 않으면 찾기 어렵다. 공식 문서 를 유심히 보는게 그나마 찾는 방법이다..

export declare type NativeStackScreenProps<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = string,
  NavigatorID extends string | undefined = undefined
> = {
  navigation: NativeStackNavigationProp<ParamList, RouteName, NavigatorID>;
  route: RouteProp<ParamList, RouteName>;
};

알아두면 좋은 것 safe-area-context

safe-area-context 란, 휴대폰의 노치 등에 가리지 않고 확실히 화면에 나오는 영역을 이야기한다. 현재의 react-navigation 은 safe-area-context 가 자동으로 적용된 상태이다.

react-navigation 의 화면의 종류

보통은 Stack 을 사용하지만, Tab, Drawer 등 다양한 방식을 제공한다.

보통 Stack 을 사용하는 이유는 이전 페이지의 정보를 계속 유지하며 다음 페이지로 넘어갈 수 있기 때문이다. 앱에서는 이런 방식을 많이 사용한다.

react-navigation 의 Params 추가 가능

스크린에 다양한 params 를 넘길 수 있지만, 최소한의 정보만 넘겨서 소프트웨어의 복잡도를 높이지 않도록 주의해야 한다.

최종 코드 및 결과 확인하기

import * as React from "react";
import { NavigationContainer, ParamListBase } from "@react-navigation/native";
import {
  createNativeStackNavigator,
  NativeStackScreenProps,
} from "@react-navigation/native-stack";
import { Text, TouchableHighlight, View } from "react-native";
import { useCallback } from "react";

type HomeScreenProps = NativeStackScreenProps<ParamListBase, "Home">;
type DetailsScreenProps = NativeStackScreenProps<ParamListBase, "Details">;

function HomeScreen({ navigation }: HomeScreenProps) {
  const onClick = useCallback(() => {
    navigation.navigate("Details");
  }, [navigation]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <TouchableHighlight onPress={onClick}>
        <Text>홈 스크린</Text>
      </TouchableHighlight>
    </View>
  );
}

function DetailsScreen({ navigation }: DetailsScreenProps) {
  const onClick = useCallback(() => {
    navigation.navigate("Home");
  }, [navigation]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <TouchableHighlight onPress={onClick}>
        <Text>디테일 스크린</Text>
      </TouchableHighlight>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: "홈" }}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={{ title: "디테일" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

위의 화면에서 홈 스크린 을 클릭하면,

디테일 스크린 이 있는 화면으로 전환된다.

레퍼런스

인프런 - 배달앱 클론코딩