Flutter 아키텍처 개요 2편: 반응형 유저 인터페이스
반응형 유저 인터페이스
플러터 사용자 인터페이스 개발의 핵심 개념
플러터는 페이스북이 리액트를 만들며 다시 생각한 디자인 원칙에 영감을 받아 만들어졌는데, 플러터에서 반응형 유저 인터페이스 제공을 위해 어떤 식으로 동작하는지 알아본다.
전통적인 UI 프레임워크
대부분의 기존 UI 프레임워크에서는 UI의 상태를 처음 초기화 시 한 번 전체 상태를 Update 하고 그 후 부터는 사용자 입력과 같은 이벤트에 대응하여 각 이벤트에 맞는 UI 요소를 업데이트 하게 된다. 이러한 방식의 문제점은 앱이 복잡해질수록 관리가 힘들어진다는 점이다.
위 그림과 같은 앱이 있다고 했을 때, 상태를 변경할 수 있는 곳은 매우 많고 서로 유기적으로 연결되어 있는 것을 볼 수 있다. 주의를 기울이지 않으면 인터페이스의 한 부분만 수정을 하더라도 전혀 관련이 없는 부분에까지 영향이 있을 수 있다.
플러터는 다른 반응형 프레임워크와 같이 UI를 상태로부터 명시적으로 분리하여 위 문제에 대해서 대안적인 접근 방식을 취한다. 리액트 스타일의 API를 사용하면 UI에 대한 설명만 생성하여 UI 를 적절하게 생성 또는 갱신하는 작업을 모두 처리할 수 있게된다.
이러한 설명 생성을 위해서 플러터에서는 불변 클래스인 "위젯(리액트의 컴포넌트와 유사한)" 을 사용하여 별도의 객체 트리를 구성하게 된다. 플러터는 이렇게 생성된 객체 트리를 효율적으로 생성/수정/삭제를 하게된다.
플러터의 위젯은 상태를 UI로 변환하기 위해 build() 함수를 오버라이드 하여 UI를 선언한다.
UI = f(state)
build() 함수는 프레임워크에서 필요 시 항상 호출이 가능해야 하기 때문에 빠르고 부작용이 없도록 설계해야 한다.
이 접근 방식은 언어 런타임의 특정 특성(특히 빠른 객체 인스턴스화 및 삭제)에 의존한다. 다행히도 Dart는 이 작업에 특히 적합하다.
위에 대한 자세한 설명은 아래 아티클에서 확인이 가능하다. 플러터:가비지 콜렉터를 두려워하지 말라
출처
https://docs.flutter.dev/resources/architectural-overview#reactive-user-interfaces