[FLUTTER] 플러터의 UI

명령형 UI

어떠한 상태가 되도록 명령한다.

ViewA a = ViewA();
ViewB b = ViewB();
a.setColor(red) // 빨간색이 되어라
b.setColor(yello) // 노란색이 되어라
a.add(b) // b는 a의 child가 되어라

 

선언형 UI

어떠한 최종 상태를 선언한다

// 빨간색 A가 노란색 B를 child로 가지고 있다.
return ViewA(
  color: red,
  child: ViewB(
		color: yello,
	),
);

 

선언형 UI

• 상태만 선언하면 UI는 자동으로 업데이트된다.
• 최종 상태 선언에만 집중할 수 있다.
• 예시) Flutter StatefulWidget

명령형 UI

• 상태 변경에 따른 UI 업데이트를 직접 명령한다.
• UI를 보다 세밀하게 제어 할 수 있다.
• 예시) JavaScript를 이용한 DOM 조작

상태 기반 UI 관리

위젯은 현재 상태에 따라 UI를 정의합니다. 상태 변화 시 Flutter는 필요한 부분만을 효과적으로 업데이트하여 성능을 최적화합니다.

Flutter의 이점

이러한 접근 방식은 성능 향상뿐만 아니라 개발자의 생산성도 높입니다. 복잡한 UI 업데이트 로직 대신 위젯 구성에만 집중할 수 있기 때문입니다.

요약하면, Flutter 개발은 위젯을 조합하여 반응형 크로스 플랫폼 애플리케이션을 만드는 과정입니다.