[Flutter.241101] setState를 통해서 UI에 업데이트를 반영하기

지난번에 스으윽 들었던 강의를 되돌아와서 다시 듣기 시작했다.

확실히 두 번째 들어보니, 처음에 들었을 때 보다 여유도 생기고, 이해도도 조금 더 높아지는 것 같다.

 

 

플러터 공식 문서에도 등장하는 카운터 앱이다. 우하단의 (+) 플러스 버튼을 누르면 가운데 숫자가 증가한다. 

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

 

이 함수 덕분이다. 주석으로 자세하게 설명되 들어가 있다. 

"이건 setState를 호출하는데 이건 플러터 프레임워크에게 상태가 바뀌었다고 알려준고, 이로 인해 하단의 build가 다시 돌아서 업데이트된 값을 보여주도록 한다. 만약에 _counter 값 변경을 setState()를 부르지 않은 상태에서 했다면, 빌드 메서드는 다시 호출되지 않고, 화면엔 어떤것도 보여지지 않을 거다."

뭐 이런 식으로 써 있다.

 

실제로 이 상태에서는 아무 문제 없이 카운터 앱이 원하는대로 동작한다. 하지만 여기서 setState()를 제외한다면?

  void _incrementCounter() {
    _counter++;
    print(_counter);
  }

 

그래서 setState()를 제거한 함수를 사용하면, 콘솔에는 내가 클릭해서 counter 값이 변경됨이 보인다. 하지만 UI 상에는 어떠한 변화도 없다. 

왼쪽은 변함없는 UI 화면, 오른쪽은 변화가 있는 내 터미널 화면이다.

 

왜냐면 위의 주석에서 잘 설명되어 있듯이, setState()가 있어야 상태 변화가 발생했을 시에 빌드를 다시 호출해서 화면을 다시 그려주는데, 지금 그 중요한 부속품인 setState()가 빠져 있다. 이로 인해서 아무리 버튼을 여러번 눌러서 counter 값이 증가하더라도, UI 상에 보여지는 화면에는 초기값인 counter = 0; 인 그 상태 뿐인 것이다. 

 

재밌구먼.