[Flutter] setState

setState의 중요성은 여러번 강조해도 끝이 없다고 생각합니다.
과거 TIL을 통해 정리한 적이 있지만 앞으로 Flutter에서 중요한 내용을 간략하게 정리하겠습니다.

State란?

일상생활에서 사용하는 앱을 생각해보면 우리의 제스처를 통해 변화가 일어납니다.
(서버 개념을 제외하고 생각해보면)

• 은행 앱 비밀번호 입력 혹은 지문인식
• 채팅 앱 메시지 전송
• SNS 친구 삭제

이런 모든 행위를 Flutter에서는 state라는 개념을 사용하며 state Management를 통해 상태를 관리합니다.

오늘 알아볼 setState는 플러터에서 기본으로 제공하는 state Management 입니다.

setState 사용하는 방법

• setState를 사용하기 위해서 StatefulWidget을 사용해야 합니다.

해당 위젯이 상태를 변경할 수 있는 위젯이기 때문입니다. 이에 대해서는 다른 글을 작성할 예정입니다.

카운터 앱

• 카운터 앱을 통해 쉽게 setState를 알아보도록 하겠습니다.

• 초기값이 0으로 설정되어 있는 앱을 + - 동작에 따라 값을 변경하도록 해볼까요?

• [IconButton] 을 통해 + - 버튼을 만들었습니다.
  (IconButton의 필수 속성인 onPressed, icon을 꼭 입력해주셔야 합니다.)

• 콘솔을 통해 값이 증가하는 것을 확인하였으나 제 눈에는 여전히 값이 0으로 나오고 있습니다.

• 이번엔 setState를 사용해보겠습니다.

onPressed: (){
  setState(() {
    num++;
    print('num: $num');
  });
},

값이 잘 변하는 것을 확인하셨나요?

이처럼, setState가 실행되었을때 build()가 호출되어 UI를 업데이트 하면서 변경된 값이 적용되는 것 입니다.

⚠️
하지만 build를 처음부터 다시 실행하는 과정에 있어서 분명 효율적이지 않은 과정이 발생할 수 있을 것 입니다. 이를 주의해야하고 이와 관련되어 글을 작성할 예정입니다.