2주차 _ Flutter 위젯
StatefulWidget
런타임 중에 모양과 동작을 변경할 수 있다.
동적/대화형 UI 생성 가능, 상태에 따른 유연성 획득 등의 장점을 가진다.
StatelessWidget
일단 클래스를 생성하면 멤버 변수에 변화가 생기지 않는다.
함수 단위에서 클래스 멤버 변수에 변화를 주는 경우가 잦아지면 코드를 해석하기 어려워진다.
단순성(=유지관리 용이), 예측 가능성 등의 장점을 가진다.
> 위젯 - 대략적으로 요약View 위젯
PageView : 전체 화면(페이지)을 전담하는 위젯
색상, 내용(텍스트), 컨트롤 방식과 같은 옵션을 지정할 수 있음.ListView : 아이템을 리스트로 보여주는 위젯
스크롤 방향, 리스트 정렬 순서, 물리 효과와 같은 리스트 관련 옵션을 지정할 수 있음.GridView : 격자 형태 UI를 구현하는 위젯
스크롤 방향, 그리드 정렬 순서, 여백 컨트롤과 같은 그리드 관련 옵션을 지정할 수 있음.TabBar : 상단바(Tab Bar)에 관여하는 위젯
TabBar 위젯과 해당 탭바의 하위에 있는 페이지나 이벤트를 담당하는 TabBarView로 나뉨.
TabBar의 length와 위젯 내 실제 메뉴 개수가 동일해야 함. (메뉴는 커스텀 클래스 넣어도 됨
컨트롤러 필수(TabBar와 View 사이를 연결하는 역할)레이아웃 위젯
- Container
- 가장 많이 쓰인다. - SizedBox
- Row Column
- 여러 단계의 Row와 Column을 이용하여 화면을 정리할 수 있다. - Expanded
- Stack&Position
기능성 위젯
Flutter에서는 위에 기입한 위젯 말고도 다양한 라이브러리를 제공한다. 그때그때 필요한 기능을 알맞게 찾아 쓰는 것이 중요할 것 같다.
대중적인 앱 화면 위젯 해석하기
틱톡, 스레드, 알람앱의 UI 레이아웃을 보고 플러터로 개발한다면 어떤 기능을 적용할 수 있을지 예상해보고 실제로 만들어보는 실습 시간을 가졌다.
인상적이었던 부분
- 스레드의 헤더는 타 앱과 달리 페이지를 스크롤하면 딸려가며 사라지는 방식이라 appBar로 제작할 수 없다. 헤더에 디자인 요소를 배치하기 위해서 row 위젯의 spaceBetween 옵션을 이용하면 편리하다.
- Row와 Column이 생각보다 다층적인 구조로 레이아웃을 설계한다. 행과 열을 구분하고 정리하는 연습을 많이 하면 좋을 것 같다.
3주차 _ 상태 관리
상태 관리란?
변화하는 데이터를 관리하여 UI와 동기화하는 과정, 즉, 변화하는 상태를 즉각적으로 표기하여 사용자에게 전달하는 과정을 말한다.
setState
- setState 선언 -> 빌드 함수 호출 -> 데이터 동기화 -> 상태 반영 과정을 거친다.
- 컴포넌트 별 상태 관리가 목적이기 때문에 대규모 상태 관리에 적합하지 않다.
- 상태 공유가 어렵다.
- 위젯 하나하나 잘게 쪼개서 관리해야 한다 -> 복잡도가 증가해서 효율이 나쁘다.Getx
- 간단한 API, 최적화, 의존성 주입 기능, 라우팅 관리
- 의존성 개입이란? 위젯트리와 특정 기능 사이에 관계를 맺어서 언제든지 꺼내 쓰게 하는 기능이다. setState의 단점을 보완할 수 있을 것 같다.
- 라우팅 기능 -> 간편하게 네비게이션 관리
- 현재 가장 인기 있는 상태 관리 도구이다.