[Flutter #11] Stateful 위젯

 

Stateful과 Stateless 위젯에 대해서는 앞서서 간단하게 어떤 차이가 있는지를 살펴본 바 있습니.다 Stateless는 변경이 안되고 Stateful은 상태가 변하면 화면에 보여지는 내용도 바뀐다고 간단하게 설명할 수 있겠습니다. 지금까지 우리는 간단하지만 Stateless 위젯을 사용한 앱들을 바 왔었는데 기본적으로 요구하는 함수는 build 였습니다. 

 

그런데 Stateful 위젯에서는 State를 확장한 클래스가 필요합니다. 그리고 이 클래스에 build 함수가 들어갑니다. 즉, State가 변경되면 build 함수가 호출되면서 화면이 다시 그려지게 됩니다.

 

Stateful 위젯을 만들기 위해서 VS코드의 main.dart 파일 맨 아래로 갑니다. 그리고 stful을 타이핑합니다. 

그러면 VS코드에서 Stateful 위젯을 생성할 것이냐고 묻습니다. Return을 누르면 두 개의 class가 자동으로 나타납니다. 그리고 커서는 stateful 위젯의 이름을 입력하는 곳에서 깜빡이게 됩니다.

 

 

RandomWords라고 위젯의 이름을 입력합니다. 그러면 자동으로 따라오는 State 클래스의 이름들도 변경을 해 줍니다. 이름이 _RandomWordsState라고 맨 앞에 ‘_’가 붙습니다.

이 뿐만 아니라 State<RandomWords>와 같이 RandomWords라는 형식의 State를 확장하도록 자동 변경도 이루어집니다. 

 

_RandomWordsState  클래스 내에 있는 build 함수에서 Text 위젯에 무작위로 생성되는 단어를 출력하는 부분을 넣어 줘야 합니다. 

 

class _RandomWordsState extends State<RandomWords> {

  @override

  Widget build(BuildContext context) {

    final wordPair = WordPair.random();

    return Text(wordPair.asPascalCase);

  }

}

 

앞과 같이 _RandomWordsState가 호출 될 때마다 Text 위젯에 무작위로 단어가 할당되어 출력이 되는데 이 부분은 MyApp의 build 함수가 호출이 될 때마다 자동 호출이 되도록 MyApp도 수정이 필요합니다.

 

다음은 build 함수를 업데이트 내용 입니다.

 

  @override

  Widget build(BuildContext context) {

//    final wordPair = WordPair.random();

    return MaterialApp(

      title: "환영합니다",

      home: Scaffold(

        appBar: AppBar(

          title: const Text("환영합니다"),

        ),

        body: Center(

          //child: const Text("안녕하세요"),

          child: RandomWords(),

        ),

      ),

    );

  }

 

기존에 자동으로 단어를 생성을 했었던 다음의 코드는 삭제합니다.

 

final wordPair = wordPair.random();

 

마지막으로 Scaffold 안에서 Text 위젯에서 출력했던 부분을 RandomWords()로 변경을 해 줘서 우리가 만든 Stateful 위젯이 사용되도록 합니다.

 

우리가 만든 MyApp은 StatelessWidget을 확장해서 사용을 했지만 그 안에서 RandomWords를 이용해서 StatefulWidget을 확장한 RandomWords를 사용하고 있습니다. 하지만 프로그램의 실행 중에 앱의 State를 변경하는 부분이 없기 때문에 여기까지는 기존에 Stateless로 만들었던(Text 위젯만 사용했던) 앱의 동작과 다르지 않습니다.

 

앱을 다시 실행을 하고 이전과 동일한 결과가 나오는지 살펴봅니다.