React Native 앱 보호: 무단 사용자를 위한 화면 보호

Source: Dev.to

모바일 애플리케이션을 개발할 때 사용자 인증을 관리하고 민감한 부분이 로그인한 사용자에게만 노출되도록 하는 것이 중요합니다. 이번 포스트에서는 React Native에서 화면을 보호하는 방법 영상에서 보여준 것처럼, React Native 애플리케이션에서 화면을 보호하여 무단 접근을 방지하는 방법을 살펴보겠습니다.

내 애플리케이션 Dowell – Do Everything Well은 습관 추적기입니다. 핵심 요구사항은 로그인하지 않은 사용자가 앱의 보호된 섹션 내 핵심 기능에 접근하지 못하도록 하는 것이었습니다.

핵심 개념: 권한 관리

근본적인 아이디어는 사용자 세션과 인증 상태를 관리하는 것입니다. 사용자가 인증되지 않았다면 로그인 화면으로 리다이렉트하고, 로그인된 경우에는 메인 애플리케이션에 접근할 수 있게 합니다.

Step 1: 루트 레이아웃과 Session Provider

주된 로직은 레이아웃 파일에 있습니다. 여기서 여러 provider를 설정합니다. 내 설정에서는 데이터 페칭을 위해 QueryClientProvider를 사용하지만, 화면 보호에 가장 중요한 부분은 Session Provider를 만드는 것입니다.

Step 2: 상태 관리를 위한 Session Provider

SessionProvider는 사용자가 인증되었는지를 추적하는 상태 관리 시스템으로 동작합니다. 일반적으로 isAuthenticated와 같은 상태 변수를 보유합니다. 사용자가 로그인하면 이 값이 true가 됩니다.

Step 3: Root Navigator 내에서 보호된 라우트 구현

RootNavigator 안에서 useSession 훅을 사용해 isAuthenticated에 접근합니다. 여기서 화면 보호가 이루어집니다.

• 인증된 경우 (isAuthenticated === true) – 메인 애플리케이션 화면을 렌더링합니다. 영상에서는 내부 화면(예: app 폴더에 있는 화면)을 스택 네비게이터로 감쌉니다.
• 인증되지 않은 경우 (isAuthenticated === false) – 로그인 페이지로 리다이렉트합니다.

핵심은 네비게이션 스택을 조건부로 렌더링하는 것입니다. 화면을 “보호된 스택”으로 감싸고 isAuthenticated를 확인하면 됩니다:

// Example (TypeScript/React Native)
import { useSession } from '@/hooks/useSession';
import { createStackNavigator } from '@react-navigation/stack';
import SignInScreen from '@/screens/SignInScreen';
import HomeScreen from '@/screens/HomeScreen';

const Stack = createStackNavigator();

export default function RootNavigator() {
  const { isAuthenticated } = useSession();

  return (
    <>
      {isAuthenticated ? (
        // Protected screens
        <>
          {/* other protected screens */}
        </>
      ) : (
        // Public screens
        <>
          <Stack.Screen name="SignIn" component={SignInScreen} />
        </>
      )}
    </>
  );
}

워크플로우 시연

인증되지 않은 사용자가 앱을 열면 즉시 로그인 페이지로 리다이렉트됩니다. 로그인에 성공하면 메인 애플리케이션 화면으로 이동합니다. 앱은 실행 시 인증 상태를 확인하는데, 사용자가 이미 인증되어 있으면 바로 메인 화면으로 이동하고, 그렇지 않으면 로그인 페이지로 돌아갑니다.

결론

화면 보호를 구현하는 것은 안전하고 사용자 친화적인 React Native 애플리케이션을 만들기 위해 필수적입니다. SessionProvider를 활용하고 인증 상태에 따라 네비게이션 스택을 조건부로 렌더링함으로써, 권한이 있는 사용자만 앱의 보호된 부분에 접근하도록 할 수 있습니다. 이처럼 간단하지만 강력한 로직은 모바일 앱의 무결성과 보안을 유지하는 데 큰 도움이 됩니다.

앱을 직접 확인해 보세요: DOWELL