[React Native] 지출 추적 앱

스택 내비게이터

npm install @react-navigation/native-stack

 

하단 탭 패키지 설치

npm install @react-navigation/bottom-tabs

 

 

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


const Stack = createNativeStackNavigator();

Stack 상수는 두 컴포넌트에 대한 액세스를 제공하는 객체를 보유한다

→ 내비게이터 컴포넌트와 화면 등록 컴포넌트

 

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="ExpensesOverview" component={ExpensesOverview} />
    <Stack.Screen name="ManageExpense" component={ManageExpense} />
  </Stack.Navigator>
</NavigationContainer>

 

화면 순서를 사용해 ExpensesOverview가 앱이 시작될 때 불러오는 기본 컴포넌트가 되도록 설정

initialRouteName 설정해 초기에 불러와야 할 경로를 제어해도 된다

 

헤더 하나로 조정(스택 내비게이터에서 화면의 헤더 숨기기)

<Stack.Screen
  name="ExpensesOverview"
  component={ExpensesOverview}
  options={{ headerShown: false }}
/>

스택 내비게이터의 헤더를 숨겨서 하단 탭 헤더에서 스타일 수정을 해야 한다

<BottomTabs.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: GlobalStyles.colors.primary500 },
    headerTintColor: "white",
  }}
>

 

성능 면에서 최적화된 목록을 만들기 위해서는 FlatList 사용

화면에 보이지 않는 항목까지 로딩 및 렌더링 하는 일 발생 X

 

presentation 옵션

화면 로딩 방법을 제어하는 옵

<Stack.Screen
    name="ManageExpense"
    component={ManageExpense}
    options={{
      presentation: "modal",
    }}
/>

 

!! 는 값을 불리언으로 전환할 수 있는 자바스크립트 팁

거짓의 값을 참으로, 참의 값은 거짓으로 전환

const isEditing = !!editedExpenseId;

 

 

setOptions를 컴포넌트 함수에 바로 호출하면 안되기 때문에 useEffect로 감싸거나 처음에 깜빡거리는 걸 막기 위해 useLayoutEffect 훅으로 감싸야한다

useLayoutEffect는 실행해야 하는 함수와 함수가 재실행되어야 하는 시기를 제어하는 의존성 배열을 가진다

useLayoutEffect(() => {
  navigation.setOptions({
    title: isEditing ? "Edit Expense" : "Add Expense",
  });
}, [navigation, isEditing]);