React Navigation을 사용할 땐 NavigationContainer를 만들고 지원되는 네비게이터 중 하나를 사용해야 한다.

네비게이터의 종류로는 드로어, 스택네비게이터, 탭네비게이터 등 여러 종류가 존재하고 각각의 네비게이터들은 각기 다른 네비게이션 동작을 구현한다.

1. Stack Navigator

import {createNativeStackNavigator} from '@react-navigation/native-stack'

const Stack = createNativeStackNavigator();

위의 과정을 통해 만들어진 Stack은 두 개의 프로퍼티를 갖는 객체이며 각 프로퍼티는 컴포넌트의 기능을 가진 객체를 포함한다.

import SomethingScreen from './screens/SomethingScreen'
import SomethingScreenTwo from './screens/SomethingScreenTwo'

<Stack.Navigator>
	<Stack.Screen name="화면의_이름" component={SomethingScreen}/>
	<Stack.Screen name="화면의_이름2" component={SomethingScreenTwo}/>
<Stack.Navigator/>

두개의 프로퍼티는 각각 Stack.Navigator와 Stack.Screen 이며

Screen 컴포넌트는 Navigator가 관리할 화면을 등록할 수 있는 컴포넌트이다.

아무런 설정 없이는 가장 위에 있는 Screen 컴포넌트 즉, 첫 번째 자식 요소가 초기 화면이 된다.

그렇지 않은 경우 아래의 코드처럼 Navigator 컴포넌트의 initialRouteName 속성을 설정해줌으로서 초기 화면을 지정할 수 있다.

import SomethingScreen from './screens/SomethingScreen'
import SomethingScreenTwo from './screens/SomethingScreenTwo'

<Stack.Navigator initialRouteName="화면의_이름2">
	<Stack.Screen name="화면의_이름" component={SomethingScreen}/>
	<Stack.Screen name="화면의_이름2" component={SomethingScreenTwo}/>
<Stack.Navigator/>

모든 Screen에는 이름(name)을 지정할 수 있다.

name 속성은 고유한 식별자로서 화면 간 이동할 때 중요한 역할을 한다.

또한 모든 Screen에는 실제 보여줄 스크린을 component 속성에 지정해줄 수 있다.

<Stack.screen /> 컴포넌트의 component 프로퍼티로 지정된 스크린 파일은 navigation라는

React Navigation이 제공하는 프로퍼티를 받는다.

export default SomethingScreen = ({navigation}) => {
	const goToScreenTwo = () => {
		navigation.navigate("화면의_이름2")
	}

	return(
		<View>
			<Text onPress={goToScreenTwo}>Something is wrong</Text>
		</View>
	)
}

React Navigation으로 부터 받는 navigation 프로퍼티는 화면 사이를 이동하게 하는 메소드를 포함하는 객체이다.

2. useNavigation

위에서 정리했다시피 navigation 객체는 Stack.Screen 컴포넌트에서 직접 component속성으로 지정된 스크린에서만 사용이 가능하다.

그렇다면 직접 지정된 스크린내부의 컴포넌트안에서 네비게이팅하려면 어떻게 해야할까?

맨나 그놈의 props 드릴링을 두다다닥 해야할까?

이러한 비효율성을 막기 위해 존재하는것이 useNavigation 훅이다.

import { useNavigation } from '@react-navigation/native'

export default const SomeComponentInTheScreen  = () => {
	const navigation = useNavigation();
	
	return(
		<View>
			<Text>Somthing Componet's Text</Text>
		</View>		
	)
}

useNavigation 훅은 navigation 객체를 리턴하고 이는 스크린으로 등록되지 않은 컴포넌트가 네비게이션을 할 경우에 유용하게 사용된다.