react navigation - useNavigation, useRoute

https://reactnavigation.org/docs/getting-started/

expo 와 react native app을 위해 만들어진 네비게이션 라이브러리

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import CategoriesScreen from "./screens/CategoriesScreen";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from '@react-navigation/native-stack';


export default function App() {
  return (
    <>
      <StatusBar style="dark" />
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name='MealsCategories' component={CategoriesScreen}/>
  //name은 각 스택별 고유의 이름, component는 렌더링 하고자하는 컴포넌트.
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

// Stack.Screen을 통해 컴포넌트들은 네비게이션에 바인딩 된다.
// 바인딩된 컴포넌트들은 특별한 props을 얻을수 있따.
//{navigation} 구조분해 할당을 통해 navigation을 사용하여 navigation.navigate('screen name') 이동가능하다.

navigation 을 사용하는 또 다른 방법으로는
props 받는 방법의 대안으로
import { useNavigation } from '@react-navigation/native';
언제 어디서든 navigation을 쓸수 있다.

navigation처럼 route도 사용할수 있따.
props 처럼 쓸수 있고 대안으로 useRoute를 import할수도 있다.

Each screen component in your app is provided with the route prop automatically.

https://reactnavigation.org/docs/route-prop