[Go To Learn] Flutter CodeLab 회고_첫 번째 Flutter 앱

해당 글은 Go to Learn 1기 주형인님께서 작성하신 후기이며, 허락하에 게시하였습니다. 원글 :  https://velog.io/@guddls64/Flutter-CodeLabfirst-%ED%9A%8C%EA%B3%A0

 

K-DEVCON에서 하는 Flutter CodeLab에 참여하게 됐다.
동료의 추천으로 알게됐는데 5년 넘게 Flutter 개발을 하신 멘토님이 스터디를 진행해주신다고 해서 냅다 신청했다.
진행 방식은 과제가 주어지고 1주일간 진행하면서 질문을 올리면 주1회 미팅때 질의응답 하고 회고하는 시간을 갖는것이다.

1. 과제 진행

첫 과제는 간단한 단어저장 앱을 만드는것이었다.

사실 나는 flutter로 앱개발이 아예 처음이 아니라서 간단하게 만들 수 있었지만
재밌었던 부분은 위젯을 추출하는 부분이었다.

이렇게 Extract Widget 기능을 사용하면 깔끔하게 위젯이 추출된다! 매개변수도 알아서!!!

class BigCard extends StatelessWidget {
  const BigCard({
    super.key,
    required this.pair,
  });
  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(
          pair.asPascalCase,
          style: style,
          semanticsLabel: "${pair.first} ${pair.second}",
        ),
      ),
    );
  }
}

와 이거 처음에 막 flutter 시작했을때 몇 번 쓰려다가 안돼서 제대로 써보는건 처음인데
완벽하게 추출되면 기분이 >< 정말 좋다.
(하지만 조금 복잡한 부분을 시도하니 역시 잘 안되긴했다ㅎ)
잘만 사용하면 귀찮은 위젯화를 좀더 적극적으로해서 재사용성과 생산성을 높일 수 있을것같다.

 

그리고 또 흥미로웠던 부분은 NavigationRail이다. 지금까지는 flutter로 ios와 android 앱만 개발하보니 웹에서 쓰이는 위젯은 처음 사용해봤다.

 

2. 질문 & 답변

이렇게 과제를 하면서 생긴 질문들을 slack으로 남기면 멘토님께서 답변을 달아주시고, 매주 줌미팅에서 다시한번 다뤄주신다.

내가 남겼던 질문은 상태관리에 대한 것이었는데, 첫 프로젝트를 BLoC을 사용해서 만들면서 계속 들었던 질문이다.

Q. 상태관리 패키지를 사용할 때 setState 사용을 지양하라는 말이 있는데, 작은 기능이나 간단한 상태변화때도 setState를 쓰지 말아야할까요?

A. 예전에는 상태관리 패키지를 사용할때는 setState를 제거하는게 맞다고 얘기했었습니다. 하지만 Widget Tree를 구성 할 때 최하단에 위치한 Widget의 UI를 단순하게 바꿀때 혹은 애니메이션을 구동할 때에는 setState를 사용하고는 있습니다.
Bloc 패턴에서도 마찬가지인게 Bloc을 주입 한 이후에 하위 UI 레이어에서 간단하게 바뀌는 UI의 경우에는 사용해도 괜찮지 않을까 싶습니다만, 주의하실 점은 위젯의 재사용성 때문에 해당 위젯의 하위 위젯으로 상태관리 모델이 처리하는 경우가 생길 땐 이 구조를 제거해야할 필요가 있습니다.
상태관리 패키지에 영향이 가지 않는 선에서 사용하는건 상관없지만, 상황에 맞게 쓰는게 중요합니다.

역시 무조건 사용하지 않는것 보다는 상태관리 패키지의 특성을 잘 이해하고 상황에 맞게 사용하는게 좋을것 같다.

 

다른 질문 중 인상깊었던 질문은 stateFul과 Stateless에 관한 질문이었다.

Q. stateless위젯을 쓰는 이유가 새로 빌드하고 싶지 않아서 인데, 상위 위젯을 stateful로 바꾸면 하위 위젯이 stateless인게 의미가 있나요? 상위 위젯이 리빌드 될때 하위 위젯까지 다 리빌드 되는건 아닌가요?

A. 이 질문에 대한 답을 알기 위해서는 flutter의 3가지 트리에 대해 알아야 하는데, 위젯 트리 안에 엘리먼트 트리가 있고 엘리먼트 트리가 각각 랜더트리를 갖고 있습니다. 그래서 랜더트리에서 변화가 감지된 위젯만 새로 빌드를 하고 변화가 감지되지 않은 위젯들은 (ex. const 로 선언한 것들)기존 데이터를 그대로 가져다 씁니다.
(사실 이 답변은 들으면서 기록하지 않아서 정확하게 기억나지 않지만 이런 느낌으로 말씀하셨다ㅎ)

나도 궁금해서 한번 찾아봤던 내용이다. flutter에서 핫리로드를 할 때 UI에 변화가 감지된 부분만 새로 빌드하고, 나머지 부분은 그대로 가져다 쓰기 때문에 가끔 UI변화를 감지하지 못하면(비즈니스 로직의 변화 등) 핫리로드를 해도 변경한 부분이 적용되지 않을때도 있었다. (vscode 렉일때도 있...)

 

3. 회고

일단 flutter를 자세하게 뜯어본다는 느낌이 들어서 좋았다. 되게 기본적인건데 사용하지 않거나 몰랐던 부분들에 대해서도 알게되었다. 그리고 뭔가 느낌적으로만 알았던 것들에 대해서도 다시 한번 생각해볼 수 있었다.

flutter의 원리와 이론에 대해 자세하게 공부할 수 있는 시간이 될것 같다.

Flutter 초고수 쿠로곰님이(멘토님) 해주시는 이런 저런 이야기들이 많은 도움이 된다.
꿀팁들도 많이 얻어 가는것 같다ㅎㅎ (위젯 인스펙터 애용하기!)

사수도 없이 급하게 flutter를 시작하고 막 개발을 했던 나에게 첫 flutter 스터디는 주에 1시간 미팅이었지만 뜻깊은 시간이었다.