반응형
UI는 사용자가 서비스와 소통하는 매체를 의미한다. 이때 UI를 만들때에는 선언형과 명령형으로 구분이 가능한대, 명령형 UI는 상태가 되도록 명령하는 부분이고, 선언형 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 조작
그렇다면 상태는 무엇일까?
상태는 변수에 할당된 값을 뜻한다. 예를들어 StatelessWidget과 StatefulWidget 을 살펴보자면
class ViewA extends StatelessWidget{
const ViewA({
super.key,
required this.color,
required this.child
});
final Color color; // 상태변수
final Widget child; // 상태변수
@override
Widget build(BuildContext context){
return Container(
color: color,
child: child
)
}
}
class ViewA extends StatefulWidget{
const ViewA({super.key});
@override
State<ViewA> createState() => _ViewState();
}
class _ViewState extends State<ViewA> {
Color color = Colors.red; // 상태변수
void setColor(Color v) {
setState((){ // 상태변경
color = v;
});
}
}
상태는 2가지 종류가 있는데, 로컬상태(Local State) , 공유상태(Shared State) 로 나눌 수 있다.
- 로컬 상태(Local State) : 공유되지 않는 상태
- BottomNavigationBar의 현재 선택한 탭
- 공유 상태(Shared State) : 여러 위젯에서 공유되어 표현되는 상태
- 로그인한 유저 정보
- 특정 게시글의 좋아요 표시
- 쇼핑 앱의 장바구니
상태 관리는 공유 상태가 변경될 때, 동기화 하는 것을 상태 관리라고 하는데, 상태관리가 안되면 데이터 일관성을 잃게 된다.
예를들면,
- 유저가 프로필을 변경해도 다른 화면에서 이전 프로필이 보이는 문제
- 쇼핑 바구니에 표시된 상품의 개수와 실제 담긴 상품 개수가 다른 문제
- 글을 작성했는데, 게시판에 반영되지 않는 문제(Create)
- 글을 수정했는데, 게시판에 반영되지 않는 문제(Update)
- 글을 삭제했는데, 게시판에 반영되지 않는 문제(Delete)
그래서 위의 문제들을 해결하기 위해서는 데이터를 한 곳에서 관리하면 동기화 문제가 해결된다. 따라서 모든 상태 관리 방법들은 공유 상태를 한 곳에서 관리하도록 중앙 집중식으로 만들어서 문제를 해결한다
반응형