※ 들어가기 전에 언급합니다.
독자의 이해를 돕기 위해 정리하고 있는 내용이 아니라 불친절할 수 있습니다.
굳이 풀어 쓰지 않아도 되는 내용은 언급하지 않습니다.
순전히 제 이해를 돕기 위해 쓰는 글입니다.
플러터 기본 개념 및 아키텍처 이해
플러터 기본 개념
플러터(Flutter)는 Google에서 개발한 오픈 소스 UI 프레임워크로서, 하나의 코드베이스로 iOS, Android, 웹, 데스크톱 등 다양한 플랫폼에서 동작하는 고품질의 애플리케이션을 만들 수 있는 도구입니다. 플러터는 다양한 위젯과 동적 UI를 빠르게 구축할 수 있는 기능을 제공하며, 이를 통해 아름답고 반응형인 사용자 인터페이스를 개발할 수 있습니다.
플러터의 주요 개념은 다음과 같습니다:
-
위젯 (Widgets):
플러터 애플리케이션의 구성 요소를 나타내는 기본 단위로, 사용자 인터페이스의 모든 것을 위젯으로 표현합니다. 위젯은 화면에 그려지는 시각적 요소이며, UI의 부분이나 전체를 구성합니다. 위젯은 StatelessWidget과 StatefulWidget으로 나뉘며, StatelessWidget은 상태가 없는 정적인 위젯이고, StatefulWidget은 상태를 가지고 동적으로 변하는 위젯입니다. -
레이아웃 (Layout):
플러터에서 위젯을 배치하는 방법을 레이아웃이라고 합니다. 컨테이너 위젯이나 로우, 컬럼과 같은 레이아웃 위젯을 사용하여 UI 요소를 구성하고 배치할 수 있습니다. 이를 통해 화면을 나누고 위젯들을 정렬하고 겹치게 할 수 있습니다. -
상태 관리 (State Management):
플러터 애플리케이션에서는 위젯의 상태를 효과적으로 관리해야 합니다. 이를 위해 'setState'를 이용한 간단한 상태 관리부터, BLoC, Provider, MobX와 같은 라이브러리를 사용한 복잡한 상태 관리 방식까지 다양한 옵션이 있습니다. 상태 관리를 통해 위젯의 상태 변경에 따라 UI가 업데이트됩니다. -
애니메이션과 인터랙션 (Animation and Interaction):
플러터는 다양한 애니메이션 및 인터랙션을 지원하여 사용자 경험을 향상시킬 수 있습니다. 애니메이션 위젯과 컨트롤러, 터치 및 제스처 처리, 애니메이션 커브 등을 통해 부드러운 화면 전환과 상호작용을 구현할 수 있습니다.
플러터에서의 컨트롤러란?
플러터에서의 "컨트롤러"는 주로 입력 필드와 관련하여 사용되는 개념을 가리킵니다.
플러터에서의 컨트롤러는 주로 텍스트 입력 필드(TextField)와 관련하여 사용됩니다. 텍스트 입력 필드는 사용자가 텍스트를 입력하는 데 사용되며, 이 입력된 텍스트를 받아 처리하는 역할을 합니다. 텍스트 입력 필드의 값을 관리하고, 사용자의 입력을 받아들이거나 변경사항을 처리하기 위해 컨트롤러를 사용할 수 있습니다.
컨트롤러를 사용하면 입력된 텍스트를 얻는 것뿐만 아니라, 텍스트의 변경사항을 감지하거나 특정한 제약 조건을 적용할 수 있습니다. 예를 들어, 특정 양식에 맞는 입력을 강제하거나, 입력된 내용에 대해 유효성 검사를 수행하고 오류 메시지를 표시할 수 있습니다.
플러터에서의 컨트롤러는 TextEditingController 클래스를 통해 구현되며, 다음과 같은 역할을 수행할 수 있습니다:
입력 값 관리: 컨트롤러는 텍스트 입력 필드의 값을 관리하고 해당 값을 읽거나 설정할 수 있습니다.
입력 값 변경 감지: 입력 값이 변경될 때 이벤트를 감지하고 이를 활용하여 필요한 처리를 수행할 수 있습니다.
텍스트 제한 및 유효성 검사: 컨트롤러를 사용하여 입력값에 대한 제한 사항을 정의하거나, 입력값의 유효성을 검사하여 적절한 조치를 취할 수 있습니다.
예시:
TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
decoration: InputDecoration(labelText: 'Enter your name'),
);
// 텍스트 변경 감지
_controller.addListener(() {
print('Text changed: ${_controller.text}');
});
// 텍스트 값 가져오기
String textValue = _controller.text;이렇게 플러터에서의 컨트롤러는 입력 필드와 관련된 상태와 동작을 효과적으로 관리할 수 있도록 도와줍니다.
-
플러그인 (Plugins):
플러터에서는 플랫폼별로 다양한 기능을 활용할 수 있도록 플러그인을 제공합니다. 이를 통해 카메라, 지도, 네트워킹 등 다양한 기능을 쉽게 통합할 수 있습니다. -
핫 리로딩 (Hot Reload):
플러터의 핫 리로딩 기능은 애플리케이션을 실행 중에도 코드를 수정하면 즉시 변경 사항이 반영되는 기능입니다. 이를 통해 개발자는 빠르게 디버깅하고 UI를 조작하며 개발할 수 있습니다. -
머티리얼 디자인 및 쿠퍼티노 스타일:
플러터는 머티리얼 디자인과 애플의 iOS 디자인 스타일을 모두 지원하므로, 각 플랫폼에 맞는 UI를 구현할 수 있습니다.
플러터 위젯
플러터(Flutter)에서 위젯은 사용자 인터페이스를 구축하고 표현하는 기본 단위입니다. 화면에 그려지는 모든 것은 위젯으로 구성되며, 위젯은 텍스트, 버튼, 이미지, 레이아웃 구성 요소 등 다양한 시각적 및 기능적 요소를 포함할 수 있습니다. 플러터의 위젯은 두 가지 주요 유형으로 나뉩니다: StatelessWidget과 StatefulWidget.
- StatelessWidget:
StatelessWidget은 상태가 없는 정적인 위젯입니다. 한 번 생성되면 그 상태는 변경되지 않습니다. 이런 유형의 위젯은 화면에 표시되는 내용이 동적으로 변하지 않을 때 사용됩니다. StatelessWidget을 구현할 때는 build 메서드를 오버라이딩하여 위젯의 외형과 구성을 정의합니다.
예시:
class MyTextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello, Flutter!');
}
}- StatefulWidget: 따로 빼서 정리할 것
플러터 레이아웃
너무 많고 길어서 개인적으로 체크함
플러터 상태 관리
플러터에서 상태 관리는 앱의 데이터와 UI 상태를 관리하는 중요한 측면입니다. 앱이 복잡해지고 상태 변화가 많아질수록 효율적인 상태 관리가 필요합니다. 플러터에서는 다양한 상태 관리 패턴과 라이브러리를 활용하여 이를 구현할 수 있습니다.
주요한 상태 관리 패턴 중 일부는 다음과 같습니다:
setState: 가장 기본적인 상태 관리 방식으로, 위젯 내에서 상태가 변경될 때 setState 함수를 호출하여 해당 위젯을 다시 렌더링하게 만듭니다. 간단한 앱이나 UI 변경이 적은 경우에 적합합니다.
Provider (ChangeNotifierProvider): Provider 패키지를 사용한 상태 관리 방식으로, 상태를 변화시키는 클래스인 ChangeNotifier를 구현하고 해당 클래스를 Provider로 감싸 위젯 트리 내에서 데이터를 공유할 수 있습니다. UI 변경이 발생하면 해당 상태가 바뀌는 컴포넌트만 다시 렌더링됩니다.
Riverpod: Provider 패키지와 비슷한 상태 관리 라이브러리로, 상태를 관리하는데 있어 보다 간편하고 선언적인 방식을 제공합니다.
BLoC (Business Logic Component): 비즈니스 로직과 UI를 분리하여 상태를 관리하는 패턴으로, 라이브러리를 활용하면 데이터의 흐름과 변화를 더 구조적으로 관리할 수 있습니다.
GetX: GetX 라이브러리는 상태 관리와 라우팅을 간편하게 다룰 수 있는 도구로, 상태 변화 감지 및 업데이트가 용이합니다.
MobX: 반응형 상태 관리 라이브러리로, 옵저버 패턴을 활용하여 상태 변화에 반응하고 필요한 UI만 업데이트할 수 있습니다.
Cubit: Bloc 패턴을 사용하는데 더 가벼운 상태 관리 라이브러리로, 쉬운 상태 변화와 UI 업데이트를 제공합니다.
상태 관리는 앱의 규모와 요구 사항에 따라 다르게 선택될 수 있습니다. 중요한 것은 프로젝트의 복잡성을 고려하여 가장 효율적인 상태 관리 패턴과 라이브러리를 선택하고 사용하는 것입니다. 각 패턴과 라이브러리의 문서와 예제를 확인하여 개발에 적합한 방식을 찾아보세요.
※ 상태란?
상태(State)는 프로그램이나 애플리케이션 내에서 변화하는 정보를 나타내는 개념입니다. 이 정보는 어떤 변수나 데이터의 형태로 존재하며, 어떤 동작에 의해 변경될 수 있습니다. 상태는 애플리케이션 내부의 데이터 변화를 추적하고 관리하는 데 사용되며, UI의 표시나 동작 변경과 관련된 중요한 역할을 합니다.
React와 Flutter 같은 프레임워크에서도 상태 개념이 중요하게 사용됩니다.
React에서의 상태(State): React에서의 상태는 컴포넌트의 데이터를 나타냅니다. React 컴포넌트는 상태 데이터를 가지며, 이 상태가 변경되면 해당 컴포넌트가 리렌더링되어 UI가 업데이트됩니다. useState 훅을 사용하여 상태를 관리하거나 클래스 기반 컴포넌트에서 state 객체를 사용하여 상태를 관리합니다.
Flutter에서의 상태(State): Flutter에서의 상태는 위젯의 내부 데이터를 나타냅니다. 위젯은 상태를 가지고 있으며, 상태가 변경되면 해당 위젯이 다시 렌더링되어 UI가 업데이트됩니다. StatefulWidget 클래스를 확장하여 상태를 정의하고, setState 메서드를 사용하여 상태를 변경하고 UI를 갱신합니다. 또한 상태 관리 라이브러리인 Provider, Riverpod, BLoC 등을 사용하여 상태를 보다 효율적으로 관리할 수 있습니다.
상태는 프로그램이 동작하는 동안 변화할 수 있는 정보를 나타내며, 상태 관리는 이러한 정보를 효율적으로 변경하고 UI와 동작을 관리하는 중요한 역할을 수행합니다.
BLoC, Provider(Riverpod) 이해
따로 빼서 정리할 것
플러터 앱의 전반적인 아키텍처
따로 빼서 정리할 것
단독 페이지에 정리해야 할 것들은
다 때로 빼서 정리할 것으로 표시함
