flutter & dart - StatefulWidget 과 StatelessWidget

Overview.

StatefulWidget 과 StatelessWidget의 차이를 알아봅시다.

1. StatefulWidget 과 StatelessWidget

 

1. StatefulWidget 과 StatelessWidget

StatefulWidget이란? 변경 가능한 상태를 가진 위젯입니다. 위젯이 처음 화면에 그려질 때 변수의 값(상태값)에 따라 위젯을 그릴 수 있고, 화면에 그림이 그려진 후 사용자에 액션에 따라 위젯을 다시 그릴 수 도 있는 위젯입니다.

 

StatefulWidget과 StatelessWidget 차이 StatefulWidget과 StatelessWidget의 차이 UI를 만들면 UI가 항상 고정되어 있지 않습니다. 사용자와 상호작용하는 UI에는 상태가 있습니다. 예를 들어 사용자가 버튼을 클릭하면 그림을 변경할 수 있습니다.

 

사용자에 의해 변경되는 화면 자전거 버튼을 클릭하면 자전거 그림이 표시되고 오토바이 버튼을 클릭하면 오토바이 그림이 표시 됩니다. 이 경우는 화면에 그림이 다 그려지고 난 뒤 사용자와 상호작용을 통해서 위젯이 다시 그려 지는 경우입니다. 이렇게 화면이 그려지고 난 뒤 사용자와 상호작용을 통해서 위젯을 다시 그려야 하는 경우 StatefulWidget을 사용해야 합니다. StatefulWidget은 상태를 가지는 위젯입니다. 상태를 가지는 위젯은 final 변수가 아닌 변경할 수 있는 일반적인 변수를 가질 수 있습니다. StatelessWidget은 상태가 없기 때문에 상호작용에 의해 화면이 동적으로 다시 그려지지 않습니다.

 

2. StatelessWidget 일반변수?

StatelessWidget에 일반 변수를 사용하면 나타나는 경고 StatelessWidget에 일반 변수를 초기화하게 되면 위와 같이 경고 메시지가 뜹니다. 해당 클래스는 변경 불가능한(@immutable) 변수를 사용하면 좋을 것 같다고 알려줍니다. 왜냐하면 변경 가능한 변수를 사용한다 하더라도 그 변수로 인해 그림을 다시 그릴 수 없기 때문입니다.

 

1. StatelessWidget

Stateless 위젯에 변수 값을 변경한다 하더라도 화면이 변경되지 않습니다. 그 이유는 Stateless 위 젯은 상태가 없는 위젯이기 때문입니다. 상태가 없으면 그림이 다시 그려지지 않습니다. 그림은 최초 앱 실행 시 한 번만 그려집니다

 

2. StatefulWidget

Stateful 위젯에 변수 값을 변경하게 되면 화면이 변경됩니다. 그 이유는 Stateful 위젯은 상태가 있 는 위젯이기 때문입니다. 상태가 있는 위젯은 앱이 실행되고 난 뒤에도 상태가 변경되면 그림을 다 시 그릴 수 있습니다

 

그런데 변경되지 않습니다. 그 이유는 변수의 값을 직접적으로 변경하게 되면 앱이 다시 build 되 지 않습니다. 플러터에서 그림을 다시 그린다는 의미는 build() 함수가 다시 실행된다는 의미입니다.

 

3. build()

build 메서드를 다시 실행하기 위해서는 변수 변경 시에 특정 함수를 호출해줘야 합니다. 바로 setState 입니다.

 

setState 함수 setState 함수를 통해서 상태변수를 변경하게 되면 build 함수가 다시 실행됩니다. 즉 상태 변경이 일어날 때 마다 build 함수가 다시 실행되며 변경된 상태에 따라 그림이 다시 그려지게 됩니다.

 

4. Widget Tree

플러터는 위젯 트리로 구성되어 있습니다.  위젯 트리는 immutable 한 특성을 가지고 있어 트리가 변경되면 파기됐다가 다시 재생성 됩니다. 위젯 트리는 Element Tree와 1 대 1로 연결되어 있습니다.

 

위와 같은 화면이 있다면 위젯트리는 다음과 같이 구성될 것입니다.

앱이 실행되어 처음 화면이 나타날 때 StatefulWidget의 build() 함수가 호출되며 ❶, ❷, ❸, ❹ 순 으로 그림이 그려지게 됩니다. 마찬가지로 StatelessWidget 또한 동일하게 작동합니다. 다른 점은 StatelessWidget은 build() 함수가 단 한 번만 호출될 수 있지만 StatefulWidget은 상태 를 가지기 때문에 상태가 변경되게 되면 다음과 같이 build() 함수가 재실행되어 ❶, ❷, ❸, ❹를 다시 그립니다

 

단점은 Text 위젯을 다시 그리기 위해서 Column, Container, Text, Image 위젯, 즉 모든 위젯이 다시 그려지는 일이 발생합니다. 그 이유는 플러터는 부모가 다시 그려지면 그 이하의 모든 자식들 이 다시 그려지게 되기 때문입니다. 어떻게 하면 Text 위젯만 다시 그릴 수 있을까요?

 

5. BuildContext 분리하기

플러터는 그림을 그릴 때 어떤 위젯을 다시 그려야 할지 참조하기 위해 BuildContext를 가지고 있습니다. build 라는 뜻은 건물 등을 다시 짓다라는 뜻이 있습니다. context는 문맥, 전후사정이라 는 뜻이 있습니다. 뜻을 풀이해보면 건물을 다시 짓기 위해 전후 흐름을 알고 있는 클래스가 바로 BuildContext 클래스입니다. 예를 들어 보겠습니다. 어제 1페이지부터 10페이지까지 플러터책을 썼습니다. 그리고 오늘 플러터 책을 이어서 써야 하는 상황입니다. 몇 페이지부터 쓰면 될까요?

 

당연히 11페이지부터 책을 이어 쓰면 됩니다. 플러터에서는 BuildContext가 11페이지부터 글을 다시 적어야 하는 것을 알고 있습니다. 플러터 책을 쓴다는 것은 build 한다는 뜻이고, 11페이지부터 적어야 한다는 것은 context를 알고 있 다는 뜻입니다. 결국 BuildContext란 어느 위젯부터 그림을 다시 그려야 하는지를 알고 있는 클래 스입니다. 우리는 무엇을 하면 될까요?　위젯 트리에서 build() 함수가 실행되는 시점을 변경하면 Text위젯만 다시 그릴 수 있습니다.

위와 같이 build() 함수가 실행되는 시점을 변경하기 위해서는 새로운 위젯을 생성해야 하고 새로운 위젯을 생성하면 새로운 BuildContext가 생성되게 됩니다.