inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

코드정리 관련

321

lemonhush89

작성한 질문수 4

0

강사님 안녕하세요?

강의 너무 잘 듣고 있습니다.

코드 정리 관련하여 질문이 있습니다!

(전공자(또는 현업 개발자)가 아니라 질문이 이상해도 양해의 말씀 부탁 드립니다.)

 

코드정리 시 StatelessWidget 클래스로 정리하는 것(아래 코드 중 #2)과 Return 타입을 Widget으로 하는 함수로 정리하는 것(아래 코드 중 #3)의 차이가 궁금합니다.

 

 

#1

class _HomeScreenState extends State<HomeScreen> {
  List<int> numbers = [123, 456, 789];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: PRIMARY_COLOR,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            header(),
            middle(numbers: numbers.toList()),
            bottom(context, onCreateNumbers),
          ],
        ),
      ),
    );
  }

#2

class header extends StatelessWidget {
  const header({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      const Text(
        '랜덤숫자 생성기',
        style: TextStyle(
          color: Colors.white,
          fontSize: 40,
        ),
      ),
      IconButton(
        icon: const Icon(Icons.settings),
        color: RED_COLOR,
        onPressed: () {},
      ),
    ],
  );
  }
}

 

#3

Widget header() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      const Text(
        '랜덤숫자 생성기',
        style: TextStyle(
          color: Colors.white,
          fontSize: 40,
        ),
      ),
      IconButton(
        icon: const Icon(Icons.settings),
        color: RED_COLOR,
        onPressed: () {},
      ),
    ],
  );
}

클론코딩 Flutter

답변 1

1

코드팩토리

안녕하세요!

일단 차이는 명확합니다. 위젯 기반으로 새로운 UI를 만들게되면 독립적인 라이프사이클을 가져갈 수 있습니다. 즉, 해당 클래스에 국한되게 build() 함수를 실행해서 렌더링 사이클을 가져갈 수 있습니다.

하지만 함수형으로 구현할경우 그렇지 않습니다. 클래스에 종속되는 위젯을 반환하는 함수는 어쨋든 해당 위젯의 build() 함수가 실행될때 함수가 재실행 될 수밖에 없습니다. 독립적인 라이프사이클을 가져가지 못하는거죠.

그러니 퍼포먼스적으로 봤을때 부분적으로 렌더링 할 수 있는 여지가 있다면 새로운 위젯을 생성해서 UI를 작업하시는게 제일 유리합니다.

다만 가장 큰 단점은 역시 새로운 위젯을 생성했을때 많은 템플릿 코드가 생성된다는 점이죠!

감사합니다.

LocationPermission.denied관련 질문입니다

0

588

1

videocontrollor dispose

0

431

1

onlogotap함수의 video nullable관련질문

0

391

1

setState 사용 차이

1

441

1

블로그 웹앱 배포 방법

0

507

1

sizedbox 위젯에 primary = RED_COLOR

1

434

1

개념 강의 순서 질문

0

409

1

materialstateProperty 다른 메소드관련질문

0

414

1

내 노트 모아보기

0

502

1

SafeArea (iPhone, Android)

0

408

1

web view 실행 안됩니다.

0

408

1

랜덤 숫자 생성기 프로젝트 관련

0

537

2

안도르이드 애뮬레이터 질문

0

384

1

super를 사용하는 건, 부모와 자식 클래스의 파라미터 이름이 꼭 같아야하나요?

0

474

1

선생님 flutter device를 크롬으로 했을때 http 통신이 안됩니다..

0

782

1

no element

0

441

1

암호화

0

235

1

책과 강의

0

387

1

voidcallback함수와 클래스내에 변수선언에 관한질문

0

475

1

android studio 세팅

0

480

1

오늘도 출근 세팅하기

2

563

1

재사용 클래스 임폴트 방법

0

480

1

가상화를 못하는 CPU인건가요? 확인 부탁드립니다.

0

399

1

flutter dispose 관련

0

1389

2