[Flutter] 플러터 기본기 다지기 - 1

"Everything is a Widget" — Flutter의 핵심 철학

Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현합니다. 이는 개발의 일관성과 효율성을 크게 높여줍니다.

 

선언적 UI 구성

Flutter는 React에서 영감을 받은 선언적 프로그래밍 방식을 채택했습니다. 개발자는 원하는 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,
),
);

 

Flutter는 선언형 UI 프레임워크라고 불립니다.

위 예제에는 아래 상태들이 모여서 화면(UI)를 만들고 있습니다.

● ViewA가 빨간색인 상태
● ViewB가 노란색인 상태
● ViewA가 ViewB를 Child로 가진 상태

라이브러리 -> 실행의 권한이 개발자한테
프레임워크 -> 실행의 권한이 플러터한테

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

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

 

상태 기반 UI 관리

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

Flutter의 이점

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

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