StatelessWidget 과 StatefulWidget 차이점

SLW와 SFW 모두 UI를 가지는 화면을 구성할 때 사용하는 위젯 클래스다. 두 위젯 모두 Scaffold를 이용해 동일한 방식으로 화면을 구성하게 된다.

 

StatelessWidget

변경되는 변수가 실시간으로 반영되지 않는다

 

build 메서드는 SLW과 SFW(더 정확히는 SFW의 State 클래스에서 구현되며 화면을 구성할 UI들을 구현하는 메서드다.

즉 화면이 출력될 때 build 메서드가 호출되면서 build 메서드 내부에 구현한 UI 위젯들이 화면에 출력

 

StatelessWidget은 이름 그대로 상태(State)를 가지지 않는 위젯 클래스다. 그래서 SLW 내부의 모든 UI 위젯들은 상태를 가질 수 없으며 상태가 없으니 상태의 변화를 인지할 필요도 없고 할 수도 없는 것이다

 

SLW은 변화가 필요없는 화면을 구성할 때 사용하는 위젯 클래스이며, 그렇기 때문에 build 메서드는 한 번만 호출된다.

 

StatefullWidget

SFW은 한번 생성한 화면의 구성이 어떠한 이유로 인해 변경될 수 있는 경우에 사용하는 위젯 클래스다.

SFW의 경우도 다음과 같이 동일한 UI 구성의 화면으로 구현한다.

 

SFW으로 화면을 구성할 때에는 SLW의 경우와는 다르게 StatefulWidget을 상속하는 위젯 클래스와 State를 상속하는 상태 클래스 두 개로 구성된다. 그리고 화면을 구성하는 build 메서드를 SFW 클래스가 아닌 SFW 클래스 타입의 State를 상속하는 상태 클래스에서 구성한다.

 

단순히 StatefulWidget으로 구현한다고만 해서 화면내부 UI가 참조하는 값(속성)의 변화가 화면에 바로 반영되진 않는다는 것이다. 버튼을 클릭하여 값을 변경하여도 UI는 자신이 참조하는 값이 변경되었음을 인지하지 못하는다는 것이다.

이렇게 변경된 값이 UI 위젯에 반영하기 위해 이용하는 메소드가 setState다.

 

setState 메서드는 SFW 내부의 상태를 변경할 때 사용하는 메서드이며 setState 메서드에서 변경된 상태 값을 플랫폼에 전달하여 build 메서드가 호출되도록 한다.

 

정리

• SFW은 화면의 구성이 상태 변화에 따라 재구성되어야 할 때 사용된다.
• SFW의 상태 변경은 setState 메서드를 이용해서 변경해야 한다.
• 플랫폼은 setState 메서드가 호출될 때마다 build 메서드를 재호출하여 화면을 다시 그린다.