flutter 내부 구조 살펴보기

koeyhoyh·2022년 4월 19일
0

App_Flutter

목록 보기
1/19

설치 및 참고: https://flutter-ko.dev/docs

간단한 예제를 시험해볼 때 사용하면 좋은
Dart Pad : https://dartpad.dev/?

Xcode와 Android Studio 모두를 설치해야 ios, android 에뮬레이터 모두를 사용할 수 있다. (Mac OS 기준)

굉장히 문서화 작업이 깔끔하게 잘 되어있다고 느꼈다.


setState()

화면을 갱신하기 위해서는 반드시 setState() 함수 안에서 해야 한다.

child: Switch(
	value: switchValue,
    onChanged: (value) {
		setState(() {
			print(value);
            switchValue = value;
        });
    }),
...

사용자가 스위치를 누르면 onChanged 이벤트가 발생한다.
(onChanged 이벤트는 해당 (...) 값이 바뀌었을 경우 밑의 문장들을 실행시키는 이벤트이다.)

변수의 값이 바뀌었지만, 이 사실을 실행중인 앱애 알려 화면을 갱신하는 함수가 추가로 필요하다 -> setState() 함수의 사용

참고 !

책에서 나온 'RaiseButton' 은 flutter 2.0 버전이 도입하고 나서 더 이상 사용하지 않는다. 대신, 'ElevatedButton' 을 사용하자.

그러면, 버튼 색깔을 지정하는 예제에서 어떻게 하지...? 라는 의문이 든다.
parameter : style 에서 할 것 같은데...
모르겠어서 찾아보니 styleFrom 을 가지고 있었다.
primary 가 backgroundColor 라고 친절하게 나와있다 : )

style: ElevatedButton.styleFrom(primary: _color),

을 사용하면, 색깔을 바꿀 수 있다.

휴... 버튼을 클릭 할 때마다 무사히 색깔과 text를 바꾸었다!


3-2 위젯의 생명주기 이해하기

왜 ? 특정 상황에서 동작을 멈춰야 하는 때가 있다.
-> 동작이나 자원을 자연스럽게, 효율적으로 관리할 수 있다.

stateless widget 은 갱신 불가하므로 생명주기 X
stateful widget 은 10단계로 구분하는 생명주기가 있다.

  1. createState() 함수
    StatefulWidget 클래스를 상속받는 클래스는 반드시 이 함수를 호출해야 한다.
    -> 다른 생명주기 함수들이 포함된 State 클래스를 반환

  2. mounted == true
    createState() 함수가 호출되어 상태가 생성되었다면, mounted 속성이 true로 변경된다.
    -> 위젯을 제어할 수 있는 buildContext 클래스에 접근할 수 있다.
    --> setState() 함수를 이용할 수 있다.

if (mounted) {
	setState()
}

로 점검한다면 조금 더 안전하게 이용할 수 있다.

  1. 위젯을 초기화하는 initState() 함수
    위젯을 초기화할 때 한 번만 호출한다. 주로 데이터 목록을 만들거나, 처음 필요한 데이터를 주고 받을 때 호출한다.

  2. 의존성이 변경되면 호출하는 didChangeDependencies() 함수
    위젯을 초기화하는 initState() 함수 다음에 바로 호출되는 함수이다.
    데이터에 의존하는 위젯이라면 화면에 표시되기 전에 꼭 호출해야 한다.
    주로 상속받은 위젯을 사용할 때 피상속자가 변경되면 호출한다.

궁금증...

의존성... 의 변경...? 왜 데이터에 의존하는 위젯이라면 꼭 호출해야 하나?
피상속자가 변경된다는 것이 무슨 뜻이지...?

간단히 정리하기에는 너무 많은 분량이였다...
나중에 정리한 링크를 띄우겠다.
참고 : https://kotlinworld.com/64#%EC%-D%--%EC%A-%B-%EC%--%B-%EC%-D%B-%EB%-E%--%--%EB%AC%B-%EC%--%--%EC%-D%B-%EB%A-%B-%--%EC%--%B-%EB%--%BB%EA%B-%-C%--%ED%--%B-%EA%B-%B-%--%EA%B-%--%EB%-A%A-%ED%--%-C%EA%B-%--%-F

  1. 화면에 표시하는 build 함수
    이 함수는 Widget을 반환합니다. 즉, 위젯을 화면에 렌더링합니다.
    build() 함수에서 Widget 을 만들고 반환하면 비로소 화면에 표시됩니다.

  2. Widget을 update 하는 didUpdateWidget() 함수
    부모 위젯이나 데이터가 변경되어 위젯을 갱신해야 할 때 호출합니다. 만약 initState()에서 특정 이벤트에 의해 위젯이 변경되면 didUpdateWidget() 함수를 호출해 Widget update 를 할 수 있습니다.
    -> initState() 함수는 위젯을 초기화할 때 단 '한 번'만 호출되므로 계속해서 호출할 수 있는 함수가 필요하다.

  3. 위젯의 상태를 갱신하는 setState() 함수
    setState() 함수를 이용하면 데이터가 변경되었다는 것을 알려주고, 변경된 데이터를 이용해 화면의 UI를 변경할 수 있게 한다. 플러터 앱을 만든다는 것은 곧 '앱의 화면을 구성한다는 것'이기 때문에 가장 많이 호출할 함수이다.

  4. 위젯의 상태 관리를 중지하는 deactivate() 함수
    deactivate() 함수는 State 객체가 플러터의 구성 트리로부터 제거될 때 호출된다. 다만, State 객체가 제거되었다고 해서 해당 메모리까지 지워지지는 않으며 deactivate() 함수가 호출되더라도 dispose() 함수를 호출하기 전까지는 State 객체를 재사용할 수 있다.

  5. 위젯의 상태 관리를 완전히 끝내는 dispose() 함수
    State 객체를 영구적으로 소멸시킬 때 호출합니다. 해당 위젯을 종료한다는 뜻입니다. 위젯을 소멸할 때 꼭 호출해야 하는 함수라면 dispose() 함수 안에서 호출해야 합니다.

  6. 위젯을 화면에서 제거하면 mounted == false
    State 객체가 소멸하면 마지막으로 mounted 속성이 false 로 변하며 생명주기가 끝납니다.
    mounted 속성이 false가 되었다는 것은, 이 State를 더는 사용할 수 없다는 뜻입니다.

profile
내가 만들어낸 것들로 세계에 많은 가치를 창출해내고 싶어요.

0개의 댓글