[Flutter] StatelessWidget과 StatefulWidget의 차이점 정리

안녕하세요 성조입니다.

 

개인이 학습하고, 개념을 기록하기 위해 작성한 것이므로 100% 완벽하지 않을 수 있습니다.

혹여나 잘못된 지식이 전달되는 경우 언제든지 댓글 남겨주시면 감사드리겠습니다.

---

결론

StatelessWidget은 변하지 않는 UI로 정적인 정보를 표현할 때 자주 사용된다.

상태 변경이 없는 정적인 UI 요소를 그려낼 때 사용된다.

 

StatefulWidget은 동적으로 변할 수 있는 UI로 상태가 변할 때마다 UI를 다시 그릴 때 사용된다.

상태 변경이 필요한 동적인 UI 요소를 그려낼 때 사용된다.

 

 

 

StatelessWidget란?

상태를 갖지 않는 위젯을 의미한다.

웹을 공부한 사람이라면 화면을 구성하는 정적인 html, css와 같은 개념에 가깝다고 보면 좋을 것 같다.

 

 

StatelessWidget은 다음과 같은 특징을 가지고 있다.

특징

- 불변성 : 정적인 UI를 그려내는 것으로 한번 생성되면 그 상태가 다른 데이터로 변경되지 않고, 화면에 고정된 값으로 나온다. 데이터에 따라서 변경이 필요하지 않은 UI를 구성하는데 적합한 위젯이다.

- 재사용성 : 동일한 UI 요소를 여러 번 재사용해야 할 때 컴포넌트 화하여 여러 개 사용하기 좋다.

- 성능 : 상태가 없으므로 빌드가 덜 복잡하고, 이미 준비된 이미지 자료(로컬 데이터스토리지)를 사용하여 보여주는 작업을 하기 때문에 더 빠르다.

 

 

아이콘, 이미지, 텍스트 라벨과 같은 정적 요소와 사용자 입력이나 다른 외부 요인에 따라 변경되지 않는 위젯들을 다룰 때 자주 사용된다.

 

StatefulWidget란?

상태를 가지고 있는 위젯을 의미한다.

React를 공부해본 사람이면 useState라는 개념을 배워봤을 가능성이 크다.

개념을 모르는데 궁금한 경우는 다음의 링크를 참조하면 좋을 것 같다.

2023.05.05 - [Javascript/React.js] - [React.js] useState란?

[React.js] useState란?

 

 

다시 본론으로 돌아오면 StatefulWidget은 다음의 특징들을 가지고 있다.

특징

- 변경 가능성 : 내부 상태를 가지며, 이 상태는 시간이 지나면서 변경될 수 있거나, 변경할 수 있는 것들이다.

- State 객체 : 상태를 관리하기 위해 사용되는 것이며, 위젯의 생명 주기 동안 상태를 저장하고, UI를 빌드하는 등 동적인 자료로 사용할 수 있다.

- 동적 UI : 사용자 입력, http 네트워크 응답 등 다양한 이벤트에 반응하여 UI를 업데이트해야 할 때 자주 사용된다.

 

 

체크박스, 라디오 버튼, 슬라이더와 같은 입력 위젯이나 데이터를 로드하거나 사용자 입력에 반응하는 위젯 등에서 사용된다.

 

---

오타나 궁금한 질문 사항이 있는 경우 언제든지 댓글 남겨주시면 확인하고, 답변드릴 수 있도록 노력하겠습니다.

 

다음 포스팅 때 뵙겠습니다.

감사합니다.