[flutter] 플러터에서 훅(hook)을 이용한 화면 전환 관리

14 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, UI를 빌드하고 관리하기 위한 도구들을 제공합니다. 화면 전환은 모바일 앱 개발에서 꼭 필요한 요소 중 하나이며, 플러터에서는 이를 간단하고 효과적으로 관리할 수 있습니다. 이번 글에서는 훅(hook)을 이용하여 플러터 앱에서 화면 전환을 어떻게 관리하는지 알아보겠습니다.

플러터에서 화면 전환

플러터에서는 화면 전환을 위해 일반적으로 Navigator 클래스를 사용합니다. 이 클래스는 스택 구조로 화면을 관리하며, push, pop 등의 메서드를 이용하여 화면을 전환하고 관리할 수 있습니다. 그러나 이러한 전통적인 방식은 페이지 이동 로직과 UI 코드가 서로 섞이는 문제점이 있습니다.

훅(Hook)을 이용한 화면 전환

이러한 문제를 해결하기 위해 플러터에서는 훅(Hook)을 이용하여 화면 전환을 보다 효과적으로 관리할 수 있습니다. flutter_hooks 패키지를 이용하면 useEffect나 useNavigator와 같은 훅 함수를 사용하여 화면 전환을 관리할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffect(() {
      // 화면이 처음 로드될 때 실행되는 코드
      return () {
        // 화면이 사라질 때 실행되는 코드
      };
    }, []);

    return Scaffold(
      appBar: AppBar(
        title: Text('훅을 이용한 화면 전환'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            useNavigator().push(MaterialPageRoute(builder: (context) => SecondScreen()));
          },
          child: Text('두 번째 화면으로 이동'),
        ),
      ),
    );
  }
}

class SecondScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 화면'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            useNavigator().pop();
          },
          child: Text('이전 화면으로 이동'),
        ),
      ),
    );
  }
}

위의 예시 코드는 flutter_hooks 패키지를 이용하여 화면 전환을 관리하는 예시입니다. useEffect를 이용하여 화면이 처음 로드되었을 때와 사라질 때의 로직을 처리하고, useNavigator를 이용하여 화면을 전환합니다.

결론

플러터에서는 flutter_hooks 패키지를 이용하여 훅(Hook)을 활용하여 화면 전환을 효과적으로 관리할 수 있습니다. 이를 통해 UI 코드와 페이지 이동 로직의 분리가 가능하며, 보다 간결하고 유지보수가 용이한 코드를 작성할 수 있습니다. 화면 전환을 위한 더 많은 훅 함수들을 사용하여 플러터 앱의 화면 전환을 더욱 효율적으로 관리할 수 있습니다.

이상으로 플러터에서 훅을 이용한 화면 전환 관리에 대해 알아보았습니다. 감사합니다.