[이론] const Constructor

들어가기 앞서...

아주 간단한 실습으로 const 에 대해서 알아볼 예정이다.

---

본문으로...

1.  기본적으로 세팅!

간단하게 버튼 하나 만들었다. 

build 라는 버튼을 클릭하면 TestWidget() 의 print 함수 가 const 의 유무에 따라 어떻게 찍히는 지 확인 해보자!

  

    
    
    
    
  
void main() {
  runApp(
    MaterialApp(
      home: ConstructorPage(),
    )
  );
}

import 'package:flutter/material.dart';

class ConstructorPage extends StatefulWidget {
  const ConstructorPage({Key? key}) : super(key: key);

  @override
  State<ConstructorPage> createState() => _ConstructorPageState();
}

class _ConstructorPageState extends State<ConstructorPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TestWidget(label: 'test1'),
          TestWidget(label: 'test2'),
          ElevatedButton(onPressed: (){
            setState(() {

            });
          }, child: Text('빌드 !')),
        ],
      ),
    );
  }
}

class TestWidget extends StatelessWidget {
  const TestWidget({Key? key, required this.label}) : super(key: key);

  final String label;

  @override
  Widget build(BuildContext context) {
    print('$label build 실행!');
    return Container();
  }
}

 

Hot Restart 했을때도, 빌드 버튼을 눌렀을때도 ! TestWidget 이 출력이 되는 것을 볼 수있다.

옆의 결과는 빌드 버튼 클릭했을때의 터미널만 가져온것이다.(실제는 4개 출력 되어있음.)

 

그런데 여기서 const 를 써준다면 어떻게 될까?

const 는 어떨때 쓰이나 ? 

빌드타임에 어떤것이 들어가는 지 명확하게 알때이다. 변하지 않는값일때 작성하는것이다.

  

    
    
    
    
  
children: [
	const TestWidget(label: 'test1'),
    TestWidget(label: 'test2'),
]

원래는 앱이 첫실행할때는 위의 두개의 빌드가 실행이 되고, 달라진점이 클릭하면 const 가 없는 TestWidget 만 출력이된다. 

const 로 인스턴스화 해놓으면은 앱을 실행하는동안 단한번만 그려놓으면 다음에 다시 그릴때 기억을 해두었다가 가져오게된다.

이 점에서 매우 좋은 효율적이다. 

 

build 함수를 계속 실행하게 되는데, 우리가 const 로 선언을해두고 기억을 해두었다면 다시 호출할때 리소스 낭비할 필요없어지게 된다!

---

끝으로...

1. 노란색을 밑줄이 뜨는 이유는 const 를 작성해달라는 것이다.
2. const 를 작성하면, build 가 재실행 시 기억을 해서 재호출을 하지 않아 랜더링이 빨라진다.

---