Flutter의 Widget 종류 : Stateless와 Stateful

0️⃣ State, 상태란?

State, 상태는 사실상 개발을 하다 보면 필연적으로 마주하게 되는 단어이다. 그렇다면 상태는 대체 무엇일까?

 

앱의 정보 또는 데이터

 

를 통칭하여 상태라고 이야기한다.

 

따라서 유저가 어플리케이션을 사용하며 동작하는 모든 데이터, 예를 들어 로그인 할 때 Input 값에 입력하는 아이디와 비밀번호부터 라이트/다크 모드를 선택하는 등의 단순히 화면을 바꿔주는 값 등등 모든 데이터를 상태라고 부른다.

 

공식문서에서는 아래와 같이 명명하고 있다.

1. 위젯이 빌드될 때 동기적으로 읽을 수 있는 정보
2. 위젯의 생명주기가 끝나기 전까지 변경될 수 있는 정보

 

그렇다면, Flutter에서 State를 사용할 수 있는 방법은 무엇이 있을까?

그러기 위해서는 Stateless Widget과 Stateful Widget의 개념에 대해 알아야한다.

 

1️⃣ Stateless Widget

Stateless Widget은 말 그대로 State가 없는 위젯, 즉 상태가 없는 위젯이다.

상태가 없다는 건 무엇을 의미할까? 사용자가 상호작용하여 return 받아야할 값이 없는 것을 의미한다.

💡 따라서, Stateless Widget은 화면이 load 될 때 한 번만 그려지는 Widget으로 변경이 필요한 Data가 없다.

StatelessWidget으로부터 상속 받아 class를 생성하면 우리가 흔히 사용하는 StatelessWidget이 된다.

 

2️⃣ Stateful Widget

그렇다면 반대로 Stateful Widget은 State가 충만한, 상태가 있는 위젯을 말한다.

단순히 사용자가 상호작용하여 return값을 받는 것 뿐만 아니라 서버와 통신하여 response를 받아야 할 때도 Stateful Widget을 사용한다.

💡 따라서, Stateful Widget은 Data 변경이 필요한 경우, Data를 변경하고 이 변경된 부분만 Widget에 다시 반영하는 동적 Widget으로 이벤트 또는 상호 작용에 의해 동작한다.

 

StatefulWidget으로부터 상속 받아 class를 생성하면 우리가 흔히 사용하는 StatefulWidget이 된다.

 

3️⃣ State의 적절한 사용법

그렇다면 상태를 어떻게 사용해야 효율적일까?

Stateless Widget과 Stateful Widget의 가장 큰 차이점은, State의 존재 유무와 화면을 다시 그려내는 동작 Rerendering이다.

 

쉽게 생각하면 "화면을 다시 그려낼 필요가 있다."면 Stateful Widget을 사용하는 것이다.

 

하지만 일반적으로 어플리케이션은 사용자와 상호작용하고 서버로부터 api 통신하는 경우가 대다수인데 도대체 어떻게 Stateless Widget을 활용하는 걸까?

Stateless Widget은 Rerendering 하지 않기 때문에 Stateful Widget보다 훨씬 리소스 사용이 적고 최적화가 잘 된다.

때문에 나 같은 경우엔 Screen 단은 Stateless Widget으로 생성하고 상태관리가 필요한 별도의 Stateful Widget은 Component로 분리하여 사용하고 있다.

 

사실은 일반적으로 상태관리 라이브러리를 (GetX, Riverpod, Provider 등등) 사용하며 상태관리를 좀 더 효율적으로 하기 때문에 대체로 StatelessWidget으로 화면을 그리고 상태관리 라이브러리를 통해 상태값을 사용하기 때문에 Stateful Widget은 사용을 지양하고 있다.

그럼에도 꼭 사용해야하는 상황에 놓일 때가 있는데, WebView와 TextField와 같은 State 관리가 필수적인 상황에서는 Stateful Widget으로 화면을 그리고 있다.

❗출처

참고 사이트 : https://itwise.tistory.com/29

플러터 - Stateless Widget과 Stateful Widget 차이점