Navigator: Flutter에서 화면 관리 이해하기

Flutter에서 Navigator란

Navigator는 Route 객체 스택을 관리하여 Flutter 애플리케이션에서 화면 네비게이션을 구현하는 위젯입니다. push를 호출할 때마다 새 Route가 스택 맨 위에 배치되고, pop은 맨 위 Route를 제거하고 이전 화면으로 돌아갑니다. MaterialApp은 전체 애플리케이션에 대해 자동으로 Navigator를 생성하여 Navigator.of(context)를 통해 액세스할 수 있게 합니다.

단일 위젯 내에서 setState를 통해 콘텐츠 교체가 이루어지는 StatefulWidget과 달리, Navigator는 고유한 수명 주기를 가진 전체 화면으로 작동합니다. 스택의 각 Route는 자체 BuildContext를 가진 격리된 상태로, 메모리 누수를 방지하고 종속성 관리를 단순화합니다. pop이 호출되면 사용되지 않는 Route가 제거되어 리소스를 해제합니다.

Flutter 네비게이션 가이드(2026)에 따르면, Navigator는 명령형 API(Navigator 1.0)에서 선언형 API(Navigator 2.0)로 발전했습니다. Navigator 1.0은 push/pop 메서드를 직접 사용하므로 간단한 시나리오에 편리합니다. Navigator 2.0(Router)은 딥 링크, 적응형 네비게이션 및 웹 라우팅이 있는 애플리케이션에 적합합니다.

Navigator 내부 동작 방식

내부적으로 Navigator는 Overlay를 사용합니다. Routes를 서로 위에 표시하는 특수 위젯입니다. 각 Route는 스택의 깊이에 해당하는 z-인덱스로 Overlay에 자체 위치를 만듭니다. 이것이 push를 호출할 때 새 화면이 이전 화면 위에서 애니메이션되고, pop을 호출할 때 이전 화면이 이미 표시 준비가 되어 있는 이유를 설명합니다. 이전 화면은 제거되지 않고 새 화면 아래 Overlay에 남아 있었기 때문입니다.

전환 애니메이션을 위해 Navigator는 PageTransitionsTheme을 사용하며, ThemeData에서 재정의할 수 있습니다. 플랫폼별 애니메이션은 iOS의 경우 CupertinoPageRoute(오른쪽에서 슬라이드), Android의 경우 MaterialPageRoute(아래에서 슬라이드)를 통해 설정됩니다. PlatformRoute를 사용할 때 Navigator는 자동으로 올바른 애니메이션을 선택합니다.

Navigator 메서드: push, pop 및 pushReplacement

Navigator는 Route 스택 관리를 위한 메서드 세트를 제공합니다. 각 메서드는 단순한 전환부터 화면 기록의 완전한 교체까지 특정 네비게이션 작업을 해결합니다. 사용 예제와 함께 주요 메서드를 살펴보겠습니다.

Push 및 Pop: 기본 작업

push 메서드는 Route를 받고 pop 중에 전달된 결과와 함께 Future를 반환합니다. 이를 통해 이동한 화면에서 데이터를 수신할 수 있습니다. 예를 들어, 날짜 선택기 화면은 Navigator.pop(context, selectedDate)를 통해 DateTime을 반환할 수 있습니다. 인수 없이 pop 메서드는 null을 반환하고, 인수가 있으면 호출 화면에 값을 전달합니다.

PushReplacement: 화면 교체

pushReplacement는 현재 Route를 새 것으로 교체하고 현재 Route를 스택에서 제거합니다. 이는 사용자가 이전 화면으로 돌아갈 수 없어야 하는 시나리오에서 중요합니다. 일반적인 예는 로그인 화면입니다. 성공적인 로그인 후 현재 화면이 메인 화면으로 교체되고 뒤로 가기 버튼이 로그인 양식으로 돌아가지 않습니다.

명명된 라우트 및 onGenerateRoute

Navigator는 pushNamed 메서드를 통한 명명된 라우트 네비게이션을 지원합니다. Route를 직접 생성하는 대신 개발자가 문자열 식별자를 지정하면 Navigator가 MaterialApp의 구성에 따라 자동으로 Route를 생성합니다. 이는 코드를 단순화하고 라우트 정의를 한 곳에 중앙 집중화합니다.

명명된 라우트는 MaterialApp의 routes 속성을 통해 정의되며, 각 키는 경로 문자열이고 값은 Widget을 반환하는 함수입니다. 동적 라우트(매개변수 포함)의 경우 onGenerateRoute가 사용됩니다. RouteSettings를 받고 Route를 반환하는 콜백입니다. 이를 통해 arguments 매개변수를 통해 인수를 전달하고 깊은 네비게이션을 구현할 수 있습니다.

Flutter Cookbook(2026)에 따르면, pushNamed를 통한 인수 전달은 arguments: Object? 매개변수로 수행됩니다. 수신 화면은 ModalRoute.of(context)!.settings.arguments를 통해 인수를 추출하여 전역 변수나 InheritedWidget 없이 타입 안전한 데이터 전송을 제공합니다.

알 수 없는 라우트 처리

MaterialApp의 onUnknownRoute 속성은 pushNamed가 존재하지 않는 라우트로 호출된 경우를 처리합니다. 이는 404 화면을 표시하거나 홈페이지로 리디렉션하는 데 유용합니다. onGenerateRoute와 결합하여 가능한 모든 네비게이션 시나리오의 완전한 적용 범위를 보장합니다.

Navigator 2.0 및 선언적 Router 네비게이션

Navigator 2.0(Router API라고도 함)은 Flutter 2.0에서 도입된 선언적 네비게이션 접근 방식입니다. 개발자가 push/pop을 호출하는 명령형 Navigator 1.0과 달리, Router는 상태를 통해 네비게이션을 관리하고 브라우저 URL을 현재 화면과 자동으로 동기화합니다. 이는 웹 애플리케이션 및 데스크톱 버전에서 특히 중요합니다.

Navigator 2.0 아키텍처는 세 가지 주요 구성 요소로 구성됩니다. RouteInformationParser는 URL을 라우트 구성으로 구문 분석하고, RouterDelegate는 구성을 Route 목록으로 변환하며, BackButtonDispatcher는 시스템 뒤로 가기 버튼을 처리합니다. 이 아키텍처는 네비게이션을 완전히 예측 가능하고 테스트 가능하게 만듭니다.

Navigator 2.0 작업을 단순화하기 위해 래퍼 패키지가 있습니다. go_router(Google 권장), auto_route 및 beamer입니다. go_router는 RouterDelegate를 수동으로 구현하지 않고도 중첩 네비게이션, 리디렉션 및 딥 링크를 지원하는 라우트를 정의하기 위한 선언적 DSL을 제공합니다. pub.dev(2026)에 따르면, go_router는 선언적 접근 방식을 선호하는 새로운 Flutter 프로젝트의 35%에서 사용됩니다.

Flutter 애플리케이션의 네비게이션 예제

명명된 라우트와 화면 간 데이터 전달을 사용한 Navigator의 예를 살펴보겠습니다. 코드는 제품 목록 화면, 세부 화면으로의 전환 및 결과와 함께 반환을 보여줍니다.

// Route configuration in MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigation with data passing
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Getting data on the receiving screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Replace screen after login
Navigator.pushReplacementNamed(context, '/home');

// Clear stack to main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

예제에서 Navigator.pushNamed는 제품 ID를 세부 화면에 전달합니다. Navigator.pop(context, updatedProduct)를 통해 반환되면 호출 화면은 result 변수에서 업데이트된 데이터를 받습니다. pushReplacementNamed는 인증 후 현재 화면을 교체하고, 조건 (route) => false를 사용한 pushNamedAndRemoveUntil은 스택을 완전히 지워 이전 화면으로의 네비게이션을 방지합니다.