최근 플러터에 관심을 갖기 시작하면서 가장 고민하고 있는 것은 상태관리입니다.
"어떻게 하면 효율적으로 상태를 관리할 수 있을까?" , "setState를 사용허면 시스템에 어떤 영향을 줄까?" 같은 고민..!!
그래서 오늘은 statemanagement 중 하나인 setState를 학습해보았습니다!
상태란?
상태를 간단하게 생각해보면 언제든 바뀔 수 있는 데이터를 말합니다.
사용자가 앱을 이용하며 로그인-로그아웃 하고, 앱 이용중 뱃지가 활성화 되는 등 다양한 경우가 있을 것 입니다.
조금 더 쉽게 접근해보도록 하겠습니다!
위와 같은 아주 친근한 그림 처럼, 좋아요를 누르면 아이콘 색상이 칠해지고 숫자가 증가하는 것은 우리 모두가 아는 사실입니다.
이런 기능을 구현하기 위해서 서버 통신이나 데이터 저장과 같은 복잡한 것은 빼고 간단히 생각해보면
좋아요 버튼이 눌렸는지 안눌렸는지, 싫어요 버튼이 눌렸는지 안눌렸는지 등과 같은 정보가 필요할 것 입니다.
이것을 setState를 통해서 간략히 나타낼 수 있으며 자세히 알아보도록 하겠습니다!
안녕 setState
setState를 학습하기 앞서 먼저 알아두어야 할 개념이 있습니다. 과거포스팅을 통해 살펴보았던 StatelessWidget 그리고 StatefulWidget 입니다. 간략히 정리해보면 상태를 변경할 수 있는 StatefulWidget을 사용해야 합니다. (왜냐면 저희는 상태가 변할여지가 확실한 녀석을 취하기 때문이죠.)
❗️잠시만요! 그럼 StatelessWidget은 상태가 없나요?
Stateless는 내부적으로 상태를 지니고 있습니다.
하지만 값을 변경할 수 없습니다. 데이터의 상태는 변경이 불가합니다.
이제 준비되셨다면, 그림과 같이 좋아요 버튼을 눌렀을때 별 색상을 채우고 숫자 카운트를 구현해보겠습니다.
- StatefulWidget을 만들고 상태 값을 true false로 받기 위해 bool 변수를 만듭니다.
class _MyAppState extends State<MyApp> {
bool isPressed = false;- 사진과 같이 위젯을 만들기 위해 다음과 같이 코드를 작성하였습니다.
- 삼항연산자를 활용해 간단하게 작성했습니다.
- 상태를 담아둘 변수 isPressed 를 좋아요 버튼 클릭 true or false에 따라 아이콘과 색상이 달라지며 카운트 값 또한 41, 40으로 변동됩니다.
- setState 가 실행될 때 해당 위젯은 다시 빌드가 됩니다.
번외
매번 setState 를 사용하는 것이 정답일까요? 물론 플러터가 기본으로 제공하는 state management 이며 가장 확실하고 간단한 방법입니다.
하지만 상단의 사진과 같이 앱 트리구조를 그려보았을때 위젯 내부에 '좋아요' 를 적은 Text Widget 처럼 상태가 변하지 않는 위젯은 굳이 재빌드할 필요가 없을 것 입니다. 그리고 앱의 트리구조가 복잡해져서 가장 하단에 있는 데이터의 상태를 반영하기 위해 모든 위젯들을 재빌드 한다면 효율뿐 아니라 성능에도 영향을 미칠 것 입니다.
따라서 결론은 setState만이 정답은 아니라는 것이며, 이를 위한 다른 state management도 존재한다는 것 입니다.
