Flutter UI와 State의 분리 - @initState와 Callback 함수 사용

페이지 이동에서 UI와 State의 역할분담

UI : 어느 페이지로 이동해야 하는지 관리

State : 페이지 이동 시점

 

 

관심사 분리의 장점

1. 누가 무엇을 담당하는지 명확하면 유지보수가 쉬움

2. 서로 직접 의존하지 않음으로써 재사용이 가능함 (e.g. TestState가 Navigator를 직접 호출하면 TestState를 페이지 전환 없이 사용할 수 없어짐)

3. TestState 내부에서 Navigator를 직접 호출하면 UI 없이 단위테스트가 어려움

 

 

페이지 이동 시나리오 예시

퀴즈 기능을 구현하기 위한 UI는 `TestPage`이고, 퀴즈 관련 상태 관리는 `TestState`라는 클래스가 한다. 

class TestState extends ChangeNotifier {
  (...생략...)
  void setOnTestEnd(VoidCallback callback) {
    onTestEnd = callback; // 외부에서 종료 콜백 설정
  }

  void _loadNextQuestion() {
    if (availableCreatures.isEmpty) {
      if (onTestEnd != null) {
        onTestEnd!(); // 모든 문제가 끝나면 UI에서 설정한 콜백 실행
      }
      return;
    }
    currentCorrectAnswer = availableCreatures.removeLast();
    usedCorrectAnswers.add(currentCorrectAnswer!);
    currentChoices = _generateChoices();
    startPlayingPeriodically();
    notifyListeners();
  }
}

class _TestPageState extends State<TestPage> {
  @override
  void initState() {
    super.initState();
    Provider.of<TestState>(context, listen: false).setOnTestEnd(() {
      if (context.mounted) {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => const EndingPage()),
        );
      }
    });
  }
  (...생략...)
  void _loadNextQuestion() {
    if (availableCreatures.isEmpty) {
      if (onTestEnd != null) {
        onTestEnd!(); // 모든 문제가 끝나면 UI에서 설정한 콜백 실행
      }
      return;
    }
    currentCorrectAnswer = availableCreatures.removeLast();
    usedCorrectAnswers.add(currentCorrectAnswer!);
    currentChoices = _generateChoices();
    startPlayingPeriodically();
    notifyListeners();
  }
}

 

 

State의 역할 = 페이지 이동 시점에 이벤트 트리거

페이지 이동은 해야 하는 시점은 TestState가 알 수 있다. 지금 몇 번 퀴즈를 풀고 있는지, 퀴즈가 끝났는지 TestState가 관리하기 때문이다. 위 `TestState` 클래스에서 `_loadNextQuestion()` 함수 내에서 퀴즈 종료를 발견하면 UI에서 등록한 함수를 호출한다.

 

 

UI의 역할 = Navigator를 통해 어떤 Page로 이동해야 하는지 관리

어떤 페이지로 이동해야 하는지는 UI가 관리하도록 한다. 따라서 Navigator.push()를 호출하는 Callback 함수 하나를 초기화될 때 최초로 State에 등록시킨다. 그 코드가 바로 `initState`이다.

 

 

Callback 함수를 사용하는 이유

State 입장에서 어떤 함수를 호출하긴 할건데, 그게 어떻게 생긴 함수인지는 다른 사람(여기선 UI)이 알려줄 것이다~라고 하는 것이 바로 Callback 함수이다. UI도 마찬가지로 이런 함수를 `onTestEnd`라는 이름으로 등록해 놓겠다, 이 함수는 다른 사람(여기선 State)이 사용할 것이다~ 서로 약속하기 위해 사용한다.