[코딩애플] 쉬운 플러터 6강 : 중요한 커스텀 위젯 문법

Text를 하나하나 치다보면 너무 지저분한 100줄이 될 수 있다 따라서 그에 맞는 커스템 위젯 문법을 배워보자

stless

작성하고 tab 키 누른다

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

대문자로 클래스 작명

body: ShopItem(),

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Text('안녕'),
    );
  }
}

길고 복잡한 레이아웃을 한 단어로 축약하고 싶을 때 

stless를 누르고 탭 키를 눌러서 형식이 완성되면, 작명 후에 필요한 코드를 return 다음에 넣어준다 ; 

 

line 1. 커스텀 위젯은 class로 만든다
class는 변수, 함수 보관함이다
class 이외에 변수 함수들이 있어야 위젯으로 인정해준다. 
기존에 있던 클래스를 하나 복사해서 만들 수가 있는데
extends를 이용할 수 있는 데 그 class가 StatelessWidget이다,

Widget build(BuildContext context) {

타입 지정하는 문법은 필요 없다.

build(context) {
 //작명 + 소괄호 중괄호 = 함수 완료

클래스 만들 때 복사해서 만든다. 
@override 거기에 있던 변수 함수들이 그대로 들어오기 때문에, 
build()가 있을 수 있기 때문에 그 중복 발생하는 과정에서 "내거 먼저 사용해주세요" 라는 뜻이다.

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

  @override
  // Widget build(BuildContext context) {
   build(context) {
    //작명 + 소괄호 중괄호 = 함수 완료
    return SizedBox(
      child: Text('안녕'),
    );
  }
}

커스텀 위젯 만들고 싶으면 이 형식에 맞춰서 사용하면 된다.
복붙해서 사용하는 코드이다.

실은 변수, 함수 문법으로 축약 가능 
var a에다가 이렇게 축약도 가능하다.

그런데 이렇게 하면 성능상 문제가 있을 수 있다. 
앱을 보면 평생 바뀌지 않는 로고들 상단바 같은 것들은 변수에 담아도 되지만 
데이터들이 실시간으로 바뀌는 (e.g 좋아요 수) 것들은 커스텀 위젯을 사용해야 한다.

var a = SizedBox(
  child: Text('안녕'),
);

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

  @override
  // Widget build(BuildContext context) {
   build(context) {
    //작명 + 소괄호 중괄호 = 함수 완료
    return a;
  }
}

state 관리가 힘들어진다는 단점이 있기 때문에
커스텀 위젯으로 모두 만들어보는 것보다는
재사용이 많은 UI 덩어리들이나 페이지 하나의 위젯과 같은 것들에 사용하는 것이 좋다. 

스크롤바가 필요한 긴 목록 Column이 필요할 때 
Column 대신에 LIstView()를 사용한다.
스크롤 위치 감시도 가능하다 / 얼마큼 스크롤 했는지 
가장 큰 장점 : 메모리 절약이 가능
/ 글자가 100개 있을 때 1~50 글자는 필요 없을 때, 메모리에서 삭제되게 코드를 짤 수 있다 (성능 개선)

인스타 피드, 쿠팡 목록 모두 ListView()를 사용한다. 

---

 

숙제가 있다. 
하지만 안타깝게도 코딩애플의 무료 강의는 여기까지다 더 궁금한 점이 있으면 유료 강의를 수강해야 한다. 
여기까지 알차게 잘 들은 것 같다. 강의가 10분 씩이지만 사실 쓸데없는 부분들을 설명하지 않아서, 알찬 강의였던 것 같다. 

숙제까지 완료 - !