React Navigator 구분하기 (뒤로 가기 버튼 눌렀을때 다시 로그인 해야하는 문제 -> 로그인 여부에 따라 stack 변경 )

🔥 로그인을 해도 뒤로 가기 버튼을 누르면 로그인 화면으로 이동해서 다시 로그인 해야하는 문제

👉🏻 로그인 정보를 입력 후 로그인 버튼을 클릭하면, navigator를 통해 ListScreen 화면으로 이동하게 구현을 하였다.

이 때 헤더의 왼쪽 버튼을 클릭하면 다시 로그인 화면으로 돌아가는 문제가 생겼다.

로그인을 했음에도, 유저가 사용을 하다가 뒤로 가기 버튼을 클릭하면 다시 로그인 화면으로 이동하고 로그인을 해야 하므로 이 부분은 수정이 필요하였다.

🔎 로그인 여부에 따라 navigator 나누기

👉🏻 이는 하나의 AuthStack에 SignIn과 List를 모두 쌓았기 때문에 생기는 문제였다.

그래서!
로그인 여부에 따라서 사용자가 AuthStack 혹은 MainStack을 사용할 수 있게 App.js에서 설정해주는 방식으로 해결하기로 하였다

//AuthStack : 로그인 전 사용하는 컴포넌트
//MainStack : 로그인 후 사용하는 컴포넌트

사용자가 로그인 했는지 확인하는 상태 변수를 만들고, 상태 변수에 따라 서로 다른 컴포넌트를 사용하는 것이다.

👉🏻 App.js에서 로그인 여부에 따라 서로 다른 컴포넌트를 사용하게 상태 변수를 만들어줬고, 각각의 스택은 아래와 같이 설정해주었다.

//App.js
import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import AuthStack from './navigations/AuthStack';
import MainStack from './navigations/MainStack';

const App = () => {
  const [ user, setUser ] = useState(null);

  return (
    <NavigationContainer>
      <StatusBar style="dark" />
      {user ? <MainStack /> : <AuthStack setUser={setUser}/>} 
    </NavigationContainer>
  );
};

export default App;

//AuthStack.js
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { WHITE } from '../colors';
import SignInScreen from '../screens/SignInScreen';

const Stack = createNativeStackNavigator();

const AuthStack = (props) => {
  return (
    <Stack.Navigator 
    screenOptions={{
        contentStyle: {backgroundColor: WHITE},     
}}
>
    <Stack.Screen 
    name={'SignIn'} 
    options={{
        headerShown: false,
    }}>
        {(screenProps) => <SignInScreen {...screenProps} {...props}/>}
    </Stack.Screen>
    </Stack.Navigator>
  );
};
export default AuthStack;

//MainStack.js
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { PRIMARY, WHITE } from '../colors';
import ListScreen from '../screens/ListScreen';
import HeaderLeftButton from '../components/HeaderLeftButton';
import HeaderRightButton from '../components/HeaderRightButton';
import SettingScreen from '../screens/SettingScreen';

const Stack = createNativeStackNavigator();

//로그인 후 보여지는 스택
const MainStack = () => {
  return (
    <Stack.Navigator initialRouteName={'SignIn'} 
    screenOptions={{
        contentStyle: {backgroundColor: WHITE},
        headerTitleAlign: 'center', //안드로이드 화면을 위한 별도의 설정
        headerTintColor: PRIMARY.DEFAULT,
        headerTitleStyle: { fontWeight: '700'},
        headerBackTitleVisible: false, //Ios 뒤로가기 버튼에서도 타이틀이 보이지 않게 함
        headerLeft: HeaderLeftButton,  //헤더 왼쪽 버튼 뒤로가기 기능     
}}
>
      <Stack.Screen 
      name={'List'} 
      component={ListScreen}
      options={{title: 'TODO LIST', headerRight: HeaderRightButton}} />
      <Stack.Screen name={'Settings'} component={SettingScreen} />
    </Stack.Navigator>
  );
};
export default MainStack;

✔️ 어려웠던 부분

👉🏻 로그인 여부에 따라서 navigation stack을 구분하는 방법으로 문제를 해결하기로 하였는데, 처음에는 로그인을 했다면 어떻게 다른 stack으로 navigate를 해야할 지 잡히지 않아 어려웠다.

하지만 아래와 같이 useState, user와 setUser에 담고 삼항 연산자를 이용하여 로그인 여부에 따라 각각의 다른 컴포넌트를 사용하게 하는 것으로 해결 할 수 있었다..!

//App.js
...
const App = () => {
  const [ user, setUser ] = useState(null);

  return (
    <NavigationContainer>
      <StatusBar style="dark" />
      {user ? <MainStack /> : <AuthStack setUser={setUser}/>} 
    </NavigationContainer>
  );
};

export default App;

👉🏻 이제는 ListScreen 화면에서 헤더에 뒤로가는 버튼이 사라졌고, 문제가 해결되었다.

물론, Settings 화면은 Mainstack에 같이 있기 때문에 뒤로 가기 버튼이 있고, 누르면 ListScreen 화면으로 돌아가게 된다.

➕ 이 때 작성했던 방법이 props drilling 문제가 있어서 차일 아래와 같이 수정하여 해결하였다

• props drilling을 막기 위해 코드 수정