React Native에서 로그인 상태 구현하기

로그인 기능은 모바일 애플리케이션 개발에서 매우 중요한 요소입니다. 로그인 상태를 관리하는 것은 사용자 경험의 핵심이며, 앱의 여러 기능이 사용자의 인증 여부에 따라 다르게 작동해야 하기 때문입니다. 이번 포스팅에서는 React Native에서 로그인 상태를 구현하는 방법을 단계별로 설명하겠습니다.

1. 로그인 상태 관리의 기본 개념

React Native에서 로그인 상태를 구현하기 위해서는 상태 관리와 저장소에 대한 이해가 필요합니다. 로그인 상태를 관리하는 가장 흔한 방식은 다음 두 가지입니다:

• 전역 상태 관리: Context API 또는 Redux를 사용하여 전역 상태에서 로그인 정보를 관리합니다.
• 로컬 저장소 사용: AsyncStorage와 같은 로컬 저장소를 이용하여 로그인 정보를 기기 내부에 저장하여 앱을 닫아도 로그인을 유지합니다.

2. AsyncStorage로 로그인 정보 저장하기

@react-native-async-storage/async-storage 라이브러리를 사용하면 사용자의 로그인 정보를 기기에 저장할 수 있습니다. 이를 통해 앱이 재시작되어도 로그인 상태를 유지할 수 있습니다.

npm install @react-native-async-storage/async-storage

아래는 로그인 상태를 AsyncStorage에 저장하고 관리하는 기본적인 코드 예시입니다:

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const LoginScreen = () => {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  useEffect(() => {
    const checkLoginStatus = async () => {
      const storedStatus = await AsyncStorage.getItem('isLoggedIn');
      if (storedStatus === 'true') {
        setIsLoggedIn(true);
      }
    };
    checkLoginStatus();
  }, []);

  const handleLogin = async () => {
    // 로그인 처리 로직
    await AsyncStorage.setItem('isLoggedIn', 'true');
    setIsLoggedIn(true);
  };

  const handleLogout = async () => {
    // 로그아웃 처리 로직
    await AsyncStorage.removeItem('isLoggedIn');
    setIsLoggedIn(false);
  };

  return (
    <View>
      {isLoggedIn ? (
        <View>
          <Text>Welcome back!</Text>
          <Button title="Logout" onPress={handleLogout} />
        </View>
      ) : (
        <View>
          <Text>Please log in</Text>
          <Button title="Login" onPress={handleLogin} />
        </View>
      )}
    </View>
  );
};

export default LoginScreen;

3. Context API를 사용한 로그인 상태 관리

Context API를 사용하여 로그인 상태를 전역에서 관리하면, 여러 컴포넌트에서 쉽게 로그인 상태를 확인하고 변경할 수 있습니다. 다음은 Context API를 이용해 로그인 상태를 관리하는 간단한 예시입니다.

import React, { createContext, useState, useContext, ReactNode } from 'react';

interface AuthContextType {
  isLoggedIn: boolean;
  login: () => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  const login = () => {
    setIsLoggedIn(true);
    AsyncStorage.setItem('isLoggedIn', 'true');
  };

  const logout = () => {
    setIsLoggedIn(false);
    AsyncStorage.removeItem('isLoggedIn');
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

이렇게 설정한 후에는 로그인 상태가 필요한 컴포넌트에서 useAuth 훅을 이용해 쉽게 상태를 제어할 수 있습니다.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useAuth } from './AuthContext';

const HomeScreen = () => {
  const { isLoggedIn, login, logout } = useAuth();

  return (
    <View>
      {isLoggedIn ? (
        <View>
          <Text>Welcome to the app!</Text>
          <Button title="Logout" onPress={logout} />
        </View>
      ) : (
        <View>
          <Text>You need to log in.</Text>
          <Button title="Login" onPress={login} />
        </View>
      )}
    </View>
  );
};

export default HomeScreen;

4. React Navigation과의 통합

로그인 상태에 따라 다른 화면을 보여주려면 React Navigation을 사용하는 것이 일반적입니다. 예를 들어, 로그인된 사용자는 홈 화면으로, 그렇지 않은 사용자는 로그인 화면으로 이동시킬 수 있습니다.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthProvider, useAuth } from './AuthContext';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

const AppNavigator = () => {
  const { isLoggedIn } = useAuth();

  return (
    <Stack.Navigator>
      {isLoggedIn ? (
        <Stack.Screen name="Home" component={HomeScreen} />
      ) : (
        <Stack.Screen name="Login" component={LoginScreen} />
      )}
    </Stack.Navigator>
  );
};

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </AuthProvider>
  );
}

마무리

이번 포스팅에서는 React Native에서 로그인 상태를 관리하는 방법을 설명했습니다. AsyncStorage를 통해 간단히 로그인 정보를 저장할 수 있고, Context API를 활용해 전역에서 로그인 상태를 관리할 수 있습니다. 또한, React Navigation과 통합하여 로그인 상태에 따라 다른 화면을 보여주는 방법도 다루었습니다.

로그인 기능은 사용자 경험을 좌우하는 중요한 요소인 만큼, 다양한 상태 관리 도구와 적절한 디자인 패턴을 이용해 안정적인 로그인을 구현하는 것이 중요합니다. 여러분도 이 예시를 바탕으로 자신만의 로그인 시스템을 구축해보세요!