[Flutter] StatelessWidget과 StatefulWidget의 차이점

안녕하세요 Foma 입니다!

오늘은 플러터에서 가장 기본적인 StatelessWidget과 StatefulWidget의 차이점에 대해서 알아보려고 합니다!

바로 시작할게요!

 

---

StatelessWidget

 

 

공식 문서를 해석해보면

 

"변경 가능한 상태가 필요하지 않은 위젯"

 

이라고 하네요.

 

예를 들면 아래와 같은 화면은 더 이상 변경될 일이 없으므로 상태가 필요없는 위젯입니다.

 

 

그러므로 StatelessWidget으로 만들어주면 됩니다.

 

class MyApp extends StatelessWidget {...}

---

StatefulWidget

 

 

공식 문서를 해석해보면

 

"변경 가능한 상태를 가진 위젯"

이라고 되어있습니다.

 

그렇다면 State는 어떤 일을 할까요?🤔

 

 

1.위젯이 빌드 될 때 동기적으로 읽는다.

 

2.위젯의 수명 동안 변경 될 수있는 정보를 가진다.

 

즉, 변경하는 정보를 동기적으로 읽고 가지고 있는 역할을 합니다.

 

 

또한 공식 문서에는 State의 setState 메소드를 활용해서 state가 변경될때 즉시 알림을 받도록 구현하라고 되어있는데요.

 

StatelessWidget에서 든 예제에서 버튼을 추가해서 버튼을 누르면 휴대폰 번호가 바뀌도록 하려면 어떻게 해야할까요?

 

바로 MyApp 위젯을 StatefulWiget으로 바꿔주고 State 클래스 또한 같이 만들어줍니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {...}

 

(Visual Studio 기준으로 st만 치면 아래 Flutter stateful widget이라고 뜨는데 눌러주시면 자동으로 StatefulWidget에 필요한 메소드와 State 클래스가 만들어집니다.)

 

 

State클래스에 휴대폰 번호를 담을 변수를 하나 만들어주시고

 

휴대폰 번호가 바뀌는 메소드도 만들어줍니다.

 

메소드를 보면 setState가 있는데 위에서 설명한대로 이 메소드를 이용하여 phoneNumber의 상태를 변경시키는 것입니다.

 

setState안의 휴대폰 번호 변수는 바뀔 번호를 적어줍니다.

 

class _MyAppState extends State<MyApp> {

  String phoneNumber = "+82 10 2240 6112";

  void changePhoneNumber() {
    setState(() {
      phoneNumber = "+82 10 1234 5678";
    });
  }

 

텍스트의 글자를 $을 이용해서 변수명으로 설정하도록 합니다.

 

Text("$phoneNumber",...)

 

그리고 FlatButton 위젯을 이용하여 눌렀을때 휴대폰 번호가 바뀌도록 설정합니다.

 

  FlatButton(
            onPressed: () {
              changePhoneNumber();
            },

 

이렇게 하면 다음과 같이 버튼을 눌렀을 때 휴대폰 번호가 바뀌는 것을 볼 수 있습니다.

 

---

오늘은 이렇게 예제를 통해서 StatelessWIdget과 StatefulWidget의 차이에 대해서 알아보았습니다.

 

한마디로 정리하면 바뀔 필요가 없는 화면은 Stateless 화면이 바뀌어아야 하면 Stateful 위젯을 사용하면 됩니다!

 

혹시라도 틀린점이 있거나 고칠 부분이 있다면 댓글로 알려주세요!