<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 ​​개요​StatefulWidget 에서 initState 메서드와 build 메서드가 생각처럼 동작하지 않아 삽질을 하다 알게된 부분을 정리한다.​​​initState 와 build 메서드​호출순서​StatefulWidget 을 설명할 때 제일 중요한 것 중 하나가 '생명주기' 다. 여러 생명주기가 있지만 여기서는 initState 와 build 메서드에 대해서만 말해보려 한다. 다른 생명주기 메서드들은 제외하면 아래와 같은 순서로 메서드가 호출된다.​<ul><li>State Constructor</li><li>initState</li><li>build</li></ul>​​변수할당 (동기 / 비동기)​State 클래스에서 아래와 같이 멤버변수를 직접 할당 (초기화) 한다면 큰 문제가 없다.
 </div> <div id="SE-448ff071-13ca-4584-ab3d-1906096a4a5d">
 class _TestScreenState extends State&lt;TestScreen&gt; {
 String name = "kim"; // 직접 할당

 @override
 void initState() {
 super.initState();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("Test Page"),
 ),
 body: Center(
 child: Text("Hello"),
 ),
 );
 }
}

 </div> <div id="SE-d8c38488-ca88-421d-b60a-addcf3cbdc05">
 하지만, State 에 연결된 StatefulWidget 에 있는 변수를 State 멤버변수에 할당하거나 외부 api 를 호출하여 그 결과를 변수에 할당하기 위해서는 initState() 메서드 내부에서 해당 과정을 진행해야 한다. initState() 메서드 내부에서 변수할당 및 초기화 작업이 완료되면 그 이후에 build() 메서드가 호출된다.​여기서 또 중요한 사실이 있는데 initState() 함수내에서 실행되는 로직이 동기인지, 비동기인지에 따라 변수할당 방식 및 build() 메서드 호출과정이 달라진다.​우선 아래와 같이 initState() 내부에서 동기 로직이 실행되게 되면 initState() 내부에서 로직이 모두 실행된 이후에 build() 함수가 호출되면서 UI 가 그려지게 된다. 물론, 변수를 할당할때에 setState({}) 함수를 호출하지 않고 그냥 할당하면 된다.
 </div> <div id="SE-969794b0-d0e6-4d3e-927f-2459499aba46">
 import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
 final String name;

 const TestScreen({
 super.key,
 required this.name,
 });

 @override
 State&lt;TestScreen&gt; createState() =&gt; _TestScreenState();
}

class _TestScreenState extends State&lt;TestScreen&gt; {
 String? name;

 @override
 void initState() {
 super.initState();
 name = widget.name;
 }

 @override
 Widget build(BuildContext context) {
 print('build');
 return Scaffold(
 appBar: AppBar(
 title: Text("Test Page"),
 ),
 body: Center(
 child: Text(name!),
 ),
 );
 }
}

 </div> <div id="SE-eb5f9bcc-1b72-48fc-ab8e-fb456f4bc3c5">
 그럼, 비동기 로직은 어떨까? 예를 들어, initState() 메서드에서 외부 api 를 호출하여 받아온 정보를 멤버변수에 할당한다던가 GeoLocator 등의 api 를 통해 현재위치를 받아오는 등의 비동기 로직을 호출하면 어떻게 될까?​당연한 얘기지만 initState() 에는 async 키워드를 붙일수 없다. 이 말은 즉 initState() 내부에서 비동기 함수가 불려지게 되면 해당 함수가 끝날때까지 기다리지 않고 다음 로직을 수행하게 된다. 다시 말해, 비동기 함수가 끝나던 말던 initState() 함수는 그냥 쭉 진행되고 build() 함수가 호출되게 된다. 따라서, 비동기 로직 (ex. api 호출) 이후 변수를 할당하는 경우에는 setState({}) 함수를 통해 멤버변수에 할당을 해줘야 한다. 그러면, setState({}) 함수에 의해 build() 메서드가 다시 실행되어 UI 가 다시 그려지게 된다.
 </div> <div id="SE-5e0c56b3-e56a-40fe-906c-15438709bc2e">
 class _TestScreenState extends State&lt;TestScreen&gt; {
 String? name;

 @override
 void initState() {
 super.initState();
 customInit();
 name = "kim";
 print('done initState');
 }

 Future&lt;void&gt; customInit() async {
 print('do something async - start');
 await Future.delayed(
 Duration(seconds: 2),
 );
 print('do something async - done');
 }

 @override
 Widget build(BuildContext context) {
 print('build');
 return Scaffold(
 appBar: AppBar(
 title: Text("Test Page"),
 ),
 body: Center(
 child: Text(name!),
 ),
 );
 }
}
 </div> <div id="SE-6e866826-d6c9-4025-bd8f-07a8ea84560e">
 이러한 과정을 이해하고 UI 작업을 한다면, 아래와 같은 작업들을 수동으로 해줘야 한다.<ul><li>비동기로직이 완료되기 전에는 CircularProgressIndicator 등을 통해 로딩중으로 표시</li><li>비동기로직 완료 (멤버변수 할당 완료) 후, 해당 변수를 가져다 사용하도록 구현</li><li>비동기로직에서 에러가 발생하면 에러메시지를 표시하도록 구현</li><li>etc</li></ul>​이러한 작업들을 수동으로 해주려면 꽤나 귀찮다. 그래서 나온것이 FutureBuilder 다. (여기서 FutureBuilder 에 대해 설명하진 않는다.)
 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

개요 StatefulWidget 에서 initState 메서드와 build 메서드가 생각처럼 동작하지 않아 삽질을 하다 알게된 부분을 정리한다. initState 와 build 메서드 호출순서 StatefulWidget 을 설명할 때 제일 중요한 것 중 하나가 '생명주기' 다. 여러 생명주기가 있지만 여기서는 initState 와 build 메서드에 대해서만 말해보려 한다. 다른 생명주기 메서드들은 제외하면 아래와 같은 순서로 메서드가 호출된다. State Constructor initState build 변수할당 (동기 / 비동기) State 클래스에서 아래와 같이 멤버변수를 직접 할당 (초기화) 한다면 큰 문제가 없다. 하지만, State 에 연결된 StatefulWidget 에 있는 변수를 State 멤버변수에 할.......

[Flutter] initState 와 build 메서드, 그리고 async

댓글