[ Flutter ] Stateful Widget 과 Stateless Widget 의 차이점

 

 

Stateful Widget (상태 저장 위젯)은 사용자 상호 작용 또는 데이터 변경에 따라 동적으로 모양을 변경할 수 있는 위젯입니다.

업데이트하고 다시 렌더링할 수 있는 가변 상태 개체를 보유하여 위젯의 현재 모양을 유지합니다.

 

Stateful Widget은 앱의 수명 동안 위젯의 동작이나 모양이 변경될 수 있는 복잡하고 동적인 사용자 인터페이스에 사용됩니다.

 

Flutter에서 상태 저장 위젯은 앱의 수명 동안 동적으로 변경할 수 있는 위젯입니다. 

사용자 상호 작용이나 데이터 변경에 따라 업데이트할 수 있는 가변 데이터를 보유합니다. 

예를 들어, 상태 저장 위젯을 사용하여 사용자가 검색 질의를 입력할 수 있는 텍스트 필드를 만들 수 있습니다. 

위젯은 필드에 입력된 현재 텍스트를 추적하고 사용자가 입력할 때 텍스트를 업데이트하며 화면에 업데이트된 텍스트를 표시해야 합니다.

다음은 Flutter에서 Statefule Widget을 구현하는 간단한 예제 입니다.

 

class SearchField extends StatefulWidget {
  @override
  _SearchFieldState createState() => _SearchFieldState();
}

class _SearchFieldState extends State<SearchField> {
  // Mutable data that can be updated
  String searchQuery = '';

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (text) {
        // Update the searchQuery when the user types
        setState(() {
          searchQuery = text;
        });
      },
      decoration: InputDecoration(
        hintText: 'Enter a search query',
      ),
    );
  }
}

이 예에서 검색 필드 위젯은 텍스트 필드를 구현하는 상태 저장 위젯입니다. 

_SearchFieldState 클래스는 변경 가능한 상태 데이터(이 경우 searchQuery 문자열)를 보유합니다. 

빌드 메서드는 위젯의 상태가 변경될 때마다 호출되며 화면에서 위젯의 현재 모양을 나타내는 위젯 트리를 반환합니다. 

사용자가 텍스트 필드에 입력하면 onChanged 콜백이 트리거되고 searchQuery 문자열이 업데이트됩니다. 

setState 메서드는 업데이트된 검색 쿼리가 화면에 표시되도록 위젯 재구성을 트리거하는 데 사용됩니다.

 

 

Stateless Widget (상태 저장을 하지않는 위젯) 은 앱의 수명 동안 동적으로 변경할 수 없는 위젯입니다.

불변의 데이터만 보유하고 있으며 사용자 상호 작용이나 데이터 변경에 대응하여 외관을 업데이트할 수 없습니다.

Stateless Widget은 TextLabel 또는 Button과 같이 단순하고 정적이며 변경되지 않는 사용자 인터페이스에 사용됩니다.

다음은 Stateless Widget을 구현하는 방법에 대한 간단한 예제 입니다.

 

class TextLabel extends StatelessWidget {
  final String text;

  TextLabel({this.text});

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        fontSize: 18,
        color: Colors.black,
      ),
    );
  }
}

예제 에서는 텍스트 레이블 위젯이 상태 비저장 텍스트 레이블을 표시하는 위젯입니다.

텍스트 필드에는 위젯의 생성자에 매개 변수로 전달되는 레이블의 텍스트가 저장됩니다.

빌드 메서드는 위젯이 처음 생성될 때 한 번 호출되며, 화면에 위젯의 모양을 나타내는 위젯 트리를 반환합니다.

위젯은 동적으로 변경할 수 없으므로 setState 메서드를 사용하거나 변경 가능한 상태 데이터를 저장할 필요가 없습니다.

대신 위젯의 모양은 전적으로 생성자 인수와 빌드 방법에 의해 결정됩니다.