플러터 StatelessWidget

위젯 기본 개념 (1/2)

플러터 위젯 기본 개념 (Flutter Widget Fundamental concept) (1/2)

Hello World 예제에서 말했듯이 플러터는 위젯으로 모든 UI를 처리한다. 화면에 보이는 사진, 글자, 버튼, 리스트 등 모든 것이 위젯이다. 또한 사진을 가운데에 배치한다던가 하는 레이아웃 구성도 모두 위젯으로 이뤄진다.

이러한 위젯은 여러 가지 종류가 있지만 크게 두 가지로 나눌 수 있다. 바로 StatelessWidget과 StatefulWidget이다. 이 두 가지 위젯의 특징을 살펴보자.

StatelessWidget

StatelessWidget은 말 그대로 상태(State)를 가지지 않는 위젯이다. 상태를 가지지 않는다는 것은 위젯이 어떤 변화에 대해 무감각하다는 것을 의미한다.

Hello World 예제에서 살펴봤듯이 StatelessWidget의 위젯은 build() 함수를 통해서 만들어진다. StatelessWidget은 상태 변화를 감지하지 않기 때문에 화면을 구성할 때 최초 한 번만 build() 함수를 호출한 후 다시 호출하지 않는다. 단순히 Hello World라는 문구를 보여줄 때는 아무 문제가 없다.

하지만 어떤 버튼을 눌렀을 때 어떤 텍스트가 변경되는 동작을 구현하려고 한다면 StatelessWidget은 적합하지 않다. 왜냐하면 텍스트의 상태 변화를 알지 못하기 때문이다. 다음과 같은 상황인 것이다.

StatelessWidget을 사용하여 위와 같이 정상적으로 동작하지 않는 카운터 데모 앱을 만들어보자.

카운터 데모 앱은 플러터 프로젝트를 생성하면 기본적으로 만들어진다. 이때 생성된 코드는 StatefulWidget으로 구현되어 정상적으로 동작한다. 해당 코드를 다음과 같이 StatelessWidget를 사용하도록 변경하자.

코드의 세부적인 의미는 일단 무시하고 작성한 코드를 실행시키면 다음과 같은 화면이 나타난다.

이때 로그는 다음과 같다. build()가 실행된 것을 알 수 있다.

그 후 우측 하단의 + 버튼을 3번 누른 로그는 다음과 같다.

로그를 보면 _counter 변수의 값은 증가하고 있다. 하지만 실제 화면에는 변경된 값이 반영되지 않는다. build()를 다시 하지 않아서 변경된 값으로 Text 위젯이 갱신되지 않기 때문이다. 이렇게 상태를 가지지 않아서 상태 변화를 알 수 없는 것이 StatelessWidget의 가장 큰 특징이다. 이러한 특징으로 인해 StatelessWidget은 상태 변경이 불필요한 화면 구성에 사용하기 적합하다.