본문 바로가기
공부/flutter

[flutter] 4.0~4.4 stateful widgets

by 퇴사마루 2024. 4. 17.
728x90

4.0 state

여태 사용했던 건 stateless widget이었다. 

이제 stateful widget을 사용할것이다. 

stateless widget은 build메서드를 통해 단지 ui 를  출력한다.

stateful widget은 state를 가지고 있다. 

상태에 따라 데이터가 변하게 한다. 

st만입력해도 자동완성 가능
statelesswidget을  stateful widget으로 수정가능한 shortcut

 

비교
state 생성

stateful widget이 가지고 있는것

1. 상태를 가진 위젯

2. state를 데이터를 가진 부분. 데이터는 단지 dart 클래스의 프로퍼티이다. 

 

state 클래스는 위젯의 ui도 같이 가지고 있다. 그래서 데이터가 바뀌면 ui도 같이 업데이트 된다. 

이렇게 하면 안된다~

다음이시간에


4.1 setState

https://blog.naver.com/kyed203/220077756794 protected의 개념 확인. 
protected : 클래스의 멤버 함수에서 접근 가능, 자식 클래스의 멤버 함수에서 접근 가능, 외부에서 접근 불가능.

콜백안에 넣어줄 필요없다~ 그냥 가독성 놓게 넣는 것 뿐.

 


4.2 recap

counter는 dart 클래스의 프로퍼티이지 , 상태관리를 하는 flutter의 기능이 아니다.

 

collection for. 아래 위로 콤마 사이에 이렇게 위젯을 반복해서 넣을 수 있다.

클릭할때마다 numbers가 확실히 변하지만 (print로 했을때)

그러나 위젯은 업데이트가 되지 않앗으므로 변하지 않는다.

그래서 변화시키고 싶은 시점에서 setState를 실행하면 된다! 

react의 setState와 다르게 상태관리값이 꼬이거나 하는 일은 없다.

왜냐면 flutter의 setState는 동기식으로. 바로 업데이트 되기 때문이다. 

그리고 뭐 부모가 렌더링되면 값이 초기화되고 이런일도 ,  일단은 없어보인다.? 부모값을 참조해서 만든 값이 아니라면 말이다. 

종종 바로 ui에 반영하고 싶지 않은 경우도 있는데, 이런 경우에 최적화된거같다! 정말 좋다

내부에서는 변하지만, ui로는 반영되지 않는!

setState는 build메소드가 실행되게 한다.


4.3 BuildContext

command + .으로 code action 키기

 

앱의 모든 스타일을 한 곳에서 지정할 수 있는 기능 제공

 

 

컬러, 폰트 , 모양 등 지정가능

 애플리케이션을 위한 스타일 시트를 작성할거다!@

 

정말 많은 테마 속성들이 있다.

 이제 위젯에서 이 테마의 값에 접근하는 것을 원한다! 이말은 부모요소와 대화하기를 원한다는 것.

== AppState

이를 위해 BuildContext를 이용해야한다. 

 

플러터가 애플리케이션을 어떻게 렌더링하는지 보여주는 그림
Material App에서 MyLargeTitle까지 굉장히 깊은 곳까지 내려가야한다.

어떻게 해야할까

바로 context를 사용하는것. 

모든 상위요소에 대한 정보가 바로 BuildContext안에 담겨있다. 

 

context에는 위젯트리에 대한 정보가 담겨있고 매우 먼 요소의 데이터를가져올 수 있기 때문에 유용하다. 

 

접근가능한지 확인해보자

 

null check 시 !를 넣는다. 즉 널이 아닌것을 확신할때

혹은 conditional ?를 넣는다. 널이 아마도 있다라는 뜻으로. 

 

 

잘 바뀌었다.!

 


4.4 widget lifecycle

이벤트가 있습니다. 

My Large Title를 Stateful Widget으로 바꾸기 code action 이용.

 

statefulwidgtet은 빌드메서드 이외에 가지고 있는게 있다.

바로 iniSTate

initState는 상태를 초기화 하기 위한 메서드 

부모로인해 상태를 초기화하게하는. 뭐 그런 옵션을 가지고 있는거일수도 ?

\

initState를 꼭 쓰지 않아도 된다.

대부분의 상황에서 필요없다. 상태변수를 바깥에서도 초기화 할수있지만

부모에 의존하는 데이터를 초기화해야하는 경우! (오 맞췄다. ) 

가끔 데이터를 초기화 하기 위해 context를 사용하게 될거다. 

예를들어 api에서 업데이트를 구독하고 싶어할때 initState를 사용함. 

중요한 점은 initState메서드가 항상 build메서드보다 먼저 호출되어야한다. 그래야 빌드되기 전 초기값을 가져올테니. 

initState메서드는 오직 단 한번만 호출된다. 

우리가 inistate를 실행할 때는 super.iniState를 호출해야한다. 

부모에서 가져오는거니까.. 항상 부모트리가 먼저 렌더링 되겟네?

그래야 위에서부터 순차적으로 initstate가 실행되면서 부모의 initstate 메소드를 가져와 실행하는 것일테니. 

 

 

initState는 항상 build 메서드 전에 실행된다는 것을 기억하자.

 

dispose 메소드

위젯이 스크린에서 제거될 때 호출되는 메서드 

(리액트에서는 삼항자로  state조건에 따라서 햇던거같은데, 뭐가다를까?)

 

api 업데이트나 이벤트 리스너로부터 구독을 취소하거나 form의 리스너로부터 벗어나고 싶을 때 사용할 수 있다. 

dispose메서드는 무언가를 취소하는 곳이다. 

 

 

toggle하면서 눈이 없어질때, dispose가 콘솔에 찍힌다. 즉 제거될때 dispose가 일어난다. 

 

 

이 세개의 메소드가 실행되면서, 생명주기가 생기는거다. 

'공부 > flutter' 카테고리의 다른 글

[flutter]5.0~ pomodoro app  (1) 2024.04.18
[flutter] initState  (0) 2024.04.18
[flutter]3.5~  (0) 2024.04.17
[flutter] flutter challenge 과제 -1  (1) 2024.04.12
[flutter] flutter 강의 3  (0) 2024.04.05