외부 객체에서 State 함수에 접근하는 방법

예시 상황

1. 만약 A 클래스(혹은 위젯)에서 특정 액션이 트리거되면

2. B(Stateful Widget) 클래스 내부의 UI가 바뀌어야하는데

3. 이때 B 클래스의 State 객체 내부 메서드를 호출해야한다.

 

이를 코드로 확인해보자면

위 코드와 같이 외부클래스/위젯(ParentWidget) 에서는 Stateful 위젯의 Sate객체 메서드에 직접 접근할 수 없다. 

당연한 이야기지만 state 클래스는 따로 선언되어있기 때문이다. 하지만 그렇다고 ParentWidget에서 State 인스턴스를 만들어 호출해야할까? 물론 그렇게하면 함수 자체에는 접근할 수 있겠지만 우리가 원하는 위젯의 UI는 단순 State 함수 호출에 의해 바귀지 않는다. 왜냐하면 Widget은 껍데기이고 여기에 업데이트된 내용물(Element)을 채워주어야하는데 그러지못하고 있기 때문이다.

 

껍데기인 Widget에 내용물을 채워주는 역할은 InflateWidget() 함수가 수행한다. (함수 네이밍처럼 껍데기 위젯에 내부를 element로 팽창시키는 느낌이라고 이해하면 좋다!) 이때 inflateWidget 함수는 globalKey가 있느냐 없느냐에 따라 다른 로직으로 위젯을 채우게 된다.

 

https://api.flutter.dev/flutter/widgets/Element/inflateWidget.html

https://api.flutter.dev/flutter/widgets/Element/inflateWidget.html

1. if (key is GlobalKey) -> GlobalKey가 있는지 체크한다. 

2. final Element? newChild = _retakeInactiveElement(...) ->  GlobalKey로 기존 Element 찾기 시도한다.

3. if (newChild != null) ->  재사용 가능한 Element가 있으면~

4. newChild._activateWithParent(...) .. updateChild(...) -> 기존 element 재사용하고

5. newWidget.createElement() .. newChild.mount(...) -> 없으면 새로 element 만들어서 mount 한다.

 

 

https://chooyan.hashnode.dev/all-i-know-about-globalkey

 

한 줄 요약하자면 GlobalKey를 통해 껍데기 위젯에 element를 채워준다는 것만 기억해도 무방하다.

 

다시 앞선 문제로 되돌아온다면 State 인스턴스를 만들어서 내부 함수를 호출해준다 한들, 껍데기 위젯에는 변화가 없게된다.  State 함수를 호출시켜 껍데기 위젯을 변화시키려면 

 

1. 글로벌 키 타입으로 인스턴스를 생성한다.

 

2. 선언한 글로벌 키의 currentState를 통해 state 내 함수를 호출한다

 

끝..!

 

개인적으로 실전에서 State 내 함수를 호출해야하는 상황에서는 하나의 stateful widget만 액션을 통해 바꿔주어야할 땐 글로벌 키를 통한 직접참조, 두개이상의 stateful widget에 변화를 주어야하는 경우에는 각 위젯을 직접 참조하기보다 리버팟의 provider를 활용해서 한 번에 ui 업데이트 주는 걸 선호하는 편이다. 🤗