[RN] 네비게이션 (1)- navigation 사용하기

https://reactnavigation.org/docs/navigation-container/

😘 Navigation 이란?

React Navigation 라이브러리에서 제공하는 컴포넌트로,

내비게이션 상태를 관리하고 앱의 내비게이션 트리를 설정하는 역할을 한다.

모든 네비게이터(navigator)는 NavigationContainer 안에 위치해야 하며, 이는 내비게이션 상태가 적절하게 관리되고 유지되도록 한다.

---

💡 언제 사용할까?

• 앱의 최상위 수준에서 내비게이션 상태를 관리할 때
• 네비게이터를 설정하고, 각 화면(Screen)을 정의하고 화면 전환이 필요할 때

---

 

📌 필요한 라이브러리 설치

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens
npm install react-native-safe-area-context

# TypeScript 타입 정의 파일 설치
npm install --save-dev @types/react @types/react-native

 

각 라이브러리 간단 설명!

react-navigation/native

내비게이션 컨텍스트와 관련된 다양한 기능을 제공

 

react-navigation/stack

스택 네비게이터는 화면들을 스택 구조로 쌓아 올려, 한 화면에서 다른 화면으로 이동할 수 있게 한다

.

 

react-native screens

이 패키지는 네이티브 화면 컴포넌트를 사용하여 메모리 사용량과 성능을 최적화한다.

 

react-native safe-area-context

안전 영역(safe area)을 처리하는 패키지.

안전 영역은 디바이스의 화면 끝 부분에서 컨텐츠가 잘리거나 겹치지 않도록 여백을 두는 영역이다.

 

📌 내 코드 예시!

(나는 여기서 타입스크립트 tsx . 를사용하였담) 

//WelcomeScreen.tsx

const WelcomeScreen: React.FC = () => {
    const navigation = useNavigation();

    return (
        <View>
            <Text></Text>
            <Button
                title="로그인"
                onPress={() => navigation.navigate('Login')}
            /> 
            <Button
                title="회원가입"
                onPress={() => navigation.navigate('join')}
            />           
        </View>
    );
};

export default WelcomeScreen;

 

나는 여기서 회원가입 창과 로그인 창을 따로 만들었기 때문에 각자의 페이지로 가도록 버튼을 유도하였다!

 

//App.tsx

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

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Welcome">
                <Stack.Screen name="Welcome" component={WelcomeScreen} />
                <Stack.Screen name="Login" component={LoginScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;

 

코드를 천천히 설명해보면

 

NavigationContainer

 

네비게이션 트리를 설정하고, 상태를 관리한다. 모든 네비게이터는 이 컨테이너 안에 있어야 한다.

 

createStackNavigator

스택 네비게이터를 생성한다.

 

 

Stack.Navigator

Stack.Navigator는 네비게이션 컨테이너로,

스택 네비게이터의 구조를 정의하고 스택 네비게이터의 속성을 설정하는 역할을 한다.

주로 네비게이터의 동작 방식, 화면 전환 애니메이션, 공통 옵션 등을 설정할 수 있다. 

 

스택 네비게이터는 스크린을 쌓아 올려 내비게이션을 구현한다.

일반적으로 하나의 화면을 맨 앞에 표시하고 사용자가 새로운 화면으로 이동할 때마다 스택에 화면을 추가한다. 얘는 이 스크린들을 쌓아올릴 수 있게 한다.

뒤로가기를 하면 스택에서 쌓여있던 화면들이 하나씩 제거되면서 이전화면으로 돌아갈 수 있는 것이다. 

 

-주요속성

• initialRouteName: 초기화면 설정
• screenOptions: 스크린에 적용할 옵션 설정한다. 
• navigation.navigate:스택에 새로운 화면을 추가한다 (=> 다른 화면으로 이동한다.) 
• navigation.push:동일한 화면을 여러 번 스택에 추가할 수 있다.
• navigation.goBack: 현재 화면을 스택에서 제거하고 이전 화면으로 돌아간다.
• navigation.popToTop: 스택의 맨 처음 화면으로 돌아간다.

 

 

Stack.Screen

Stack.Screen은 Stack.Navigator 안에 위치하여 각각의 개별 화면을 정의하는 컴포넌트.

각 Stack.Screen은 네비게이터의 스택에 쌓이는 하나의 화면을 나타낸다.

주로 각 스크린의 컴포넌트와 옵션을 설정한다.

• name: 스크린의 이름을 지정한다. 네비게이터가 이 이름을 사용하여 스크린을 참조한다.
• component: 스크린에 표시할 컴포넌트를 지정한다.
• options: 개별 스크린에 적용할 옵션을 설정한다. 예를 들어, 헤더 제목, 헤더 스타일 등을 정의할 수 있다.