오늘 강의에서는 Flutter 앱 개발의 근간이 되는 핵심 개념들을 학습했다. 구체적으로 상태를 가지는 위젯 (StatefulWidget), 사용자 입력 처리 (TextField), 스크롤 가능한 리스트 (ListView), 하단 탭 메뉴 구현 (BottomNavigationBar와 IndexedStack), 그리고 페이지 간 이동 및 데이터 전달 (Navigator) 기능들을 실습했다. 이 기능들은 실제 앱 개발에 필수적인 요소들이다.
1. 상태(State) 관리 위젯: StatefulWidget
데이터가 변경됨에 따라 화면이 업데이트되어야 하는 경우, **StatefulWidget**을 사용하여 상태를 관리한다.
- 상태(State): UI에 반영되는 변경 가능한 데이터를 의미한다.
- StatelessWidget의 한계: 상태를 저장하거나 UI를 갱신할 수 없기 때문에, 데이터 변경이 필요한 경우 StatefulWidget을 사용해야 한다.
- 구현 원리: StatefulWidget 클래스는 createState() 메서드를 통해 실제 상태를 관리할 State 객체를 생성하여 연결한다.
- UI 갱신: 상태 변수를 업데이트한 후, 반드시 setState(() { ... }); 함수를 호출해야 Flutter 프레임워크가 build() 메서드를 재실행하여 화면을 업데이트한다.
2. 사용자 입력 처리 위젯: TextField
사용자로부터 텍스트 입력을 받을 때 사용하는 핵심 위젯이다.
- 주요 속성 활용: 키보드의 액션 버튼 형태를 결정하는 textInputAction, 실시간 입력 변화를 감지하는 onChanged, 입력 제출 시 호출되는 onSubmitted 등을 활용했다.
- decoration: InputDecoration을 통해 labelText, hintText, border 등 입력창의 시각적 디자인을 통일성 있게 설정할 수 있다.
- TextEditingController: TextField의 입력 내용을 직접 제어(읽기, 초기화)할 수 있는 객체이다. 메모리 누수 방지를 위해 StatefulWidget 내에서 사용 후 dispose() 메서드를 통해 해제하는 것이 중요하다.
3. 스크롤 가능한 리스트: ListView
스크롤 가능한 위젯 리스트를 효율적으로 구성하는 방법을 학습했다.
- ListView: 모든 자식 위젯을 children 리스트에 직접 나열하며, 한 번에 모두 메모리에 로드한다.
- ListView.builder: 인덱스 기반으로 위젯을 하나씩 생성하는 방식이다. 가장 큰 특징은 **화면에 보이는 개수만 build**하여 성능 최적화에 탁월하다는 점이다. 반복적인 위젯을 그릴 때 유용하다.
- ListView.separated: builder와 유사하지만, separatorBuilder를 통해 리스트 아이템 사이에 구분자 위젯을 손쉽게 삽입할 수 있다.
4. 하단 탭 메뉴 및 화면 전환: BottomNavigationBar & IndexedStack
여러 페이지를 쉽게 전환할 수 있는 하단 탭 메뉴 구조를 구현했다.
- BottomNavigationBar: 화면 하단에 고정된 탭 메뉴를 만든다. **StatefulWidget**과 함께 **currentIndex**를 상태로 관리하고 onTap 함수에서 인덱스를 갱신하여 탭 전환을 처리한다.
- IndexedStack: 여러 위젯을 겹쳐 배치하고, index 속성으로 지정된 위젯만 화면에 보이게 한다. 나머지 위젯들은 메모리에서 유지되어 탭을 전환해도 상태가 초기화되지 않는다는 장점이 있다.
5. 페이지 라우팅: Navigator
Flutter 앱에서 화면(Route) 간의 이동 및 데이터 전달을 관리하는 핵심 원리를 익혔다.
- Navigator 및 스택: 내부적으로 페이지를 스택(Stack) 구조로 관리한다. **Navigator.push()**로 새 페이지를 스택에 쌓고, **Navigator.pop()**으로 현재 페이지를 꺼내 뒤로 돌아간다.
- 데이터 전달 (Push 시): MaterialPageRoute의 builder에서 이동할 페이지 위젯을 생성할 때, 생성자 인자를 통해 데이터를 전달한다.
- 돌아올 때 값 전달 (Pop 시): Navigator.pop(context, '결과값') 호출 시 결과 값을 반환하며, 출발 페이지에서는 **await Navigator.push()**를 통해 비동기적으로 그 결과 값을 받아 처리한다.
앱 개발 종합반 강의를 다시 복습하면서 Flutter의 기본 위젯 사용법을 깊이 있게 다루었으며, 특히 상태 관리 (setState)와 Navigator를 통한 페이지 간 유기적인 데이터 통신이 앱 개발의 핵심 기능임을 깨달았다. 이번 과제인 To Do APP UI 만들기에 잘 활용해 보자.