플러터(Flutter) 의 컨트롤러 (Controller) 란?

플러터에서 Controller (컨트롤러) 란?

• UI 컴포넌트의 상태와 동작을 관리할 때 자주 사용되는 개념
• UI 요소와 기본 로직 혹은 데이터 사이의 중개자 역할을 한다.

역할 및 기능

• 상태 관리: 하나 혹은 여러개의 위젯의 상태를 관리한다. 데이터를 보관하고 UI 가 현재 상태를 반영하는지 확인한다.
• 사용자 입력 처리: 텍스트 필드의 텍스트나 슬라이더 값과 같은 사용자 입력을 처리한다.
• 데이터 바인딩: UI 와 데이터 모델 간의 동기화를 가능하게 한다.

컨트롤러 유형

• 텍스트 편집 컨트롤러: 텍스트 필드의 콘텐츠를 관리하는데 사용, 변경사항 추적, 필드에 표시되는 텍스트 제어
• 애니메이션 컨트롤러: 애니메이션 시퀀스를 관리, 타이밍과 진행을 제어
• 스크롤 컨트롤러: 스크롤 가능한 위젯의 위치를 모니터링하고 제어

컨트롤러를 쓰는 것의 장점

• 관심사 분리: UI 코드에서 비즈니스 로직을 분리시켜줌
• 재사용 가능성: 재사용이 가능하므로 코드 중복을 줄일 수 있게 해줌
• 테스트 가능성 개선: 컨트롤러를 UI 컴포넌트와 독립적으로 단위 테스트 가능

테스트 하는 방법이 개인적으로 좀 궁금하다.

Flutter 코드에서 사용

• 컨트롤러는 일반적으로 StatefulWidget 내에서 인스턴스화됨
• UI 위젯과 상호작용하여 변경사항을 수신하고 필요에 따라 상태를 업데이트함

Best Practice

• Dispose 잘하기: 메모리 누수를 방지하기 위해 initState 에서 정보를 초기화하고 dispose 에서 컨트롤러를 잘 폐기해주어야 함
• Tight Coupling 피하기: 컨트롤러는 UI 위젯과 최대한 독립적으로 설계해야 함
• 가볍게 유지하기: 특정 작업에 집중하고 관련 없는 기능으로 과부하가 걸리지 않도록 해야 함

다른 프레임워크와 비교해보기

• MVC 에서 말하는 Controller 의 개념과 유사하지만, 여기선 UI 의 상태관리에 더 집중된 개념

정리

• 컨트롤러는 사용자 입력 처리, 위젯 상태 관리, 데이터 바인딩 방법을 제공한다.
• 관심사 분리를 통해 앱의 비즈니스 로직과 프레젠테이션 레이어(UI)를 깔끔하게 분리할 수 있도록 해준다.

소스코드 예제 (YoutubePlayerController)

class _CustomYoutubePlayerState extends State<CustomYoutubePlayer> {
  YoutubePlayerController? controller;

  @override
  void initState() {
    super.initState();

    // initState 에서 컨트롤러 초기화
    controller = YoutubePlayerController(
        initialVideoId: widget.videoModel.id,
        flags: const YoutubePlayerFlags(
          autoPlay: false
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        YoutubePlayer(
            controller: controller!,
            showVideoProgressIndicator: true,
        )
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    // dispose 에서 올바르게 컨트롤러 폐기 (Best Practice)
    controller!.dispose();
  }
}