#43 #플러터 코드는 왜 이렇게 생겼을까
플러터의 코드는 왜 이렇게 생겼을까?
처음 플러터를 접해보면 너무나 많은 들여쓰기와 괄호들을 보고 왜 이렇게 어렵게 생긴거야?
아니 저기엔 쉼표가 있는데 여기는 왜 없어? 왜 여기 있어야해? 라고 생각해보신 적 있으실 수도 있는데요, 그 이유는 플러터는 모든 요소를 Widget으로 보기 때문입니다. 이에 대한 이야기를 이제 더 깊게 정리해보겠습니다.
Flutter가 다루는 것
- 무엇을 화면에 보여줄 것인가
- 사용자가 어떤 행동을 했을 때 무엇을 할 것인가
- 데이터가 바뀌었을 때 화면을 어떻게 다시 그릴 것인가
Flutter는 앱 화면을 만드는 도구다.
버튼, 입력값, 서버에서 가져온 데이터 등등…
데이터 변화가 화면의 변화로 이어지는 구조를 코드로 제어한다.
모든 것은 Widget이다
Flutter에서는 제목도, 설명 문장도, 버튼도 전부 Widget이다.
| 위젯 | 설명 |
|---|---|
StatelessWidget | 상태가 없는 위젯. 한번 그려지면 내부 데이터가 바뀌지 않는 화면 |
StatefulWidget | 상태가 있는 위젯. 데이터가 바뀌면 화면도 다시 그려야 할 때 사용 |
Scaffold: 화면의 기본 뼈대
Scaffold는 상단 바, 본문 영역, 하단 버튼, 플로팅 버튼, 메뉴 등 화면의 기본 구조를 잡아주는 위젯이다.
상태(State)란 무엇인가?
state = 화면에 영향을 주는 데이터
상태 관리 = 데이터 관리
아래처럼 숫자가 바뀌어야 하는 데이터가 바로 state다.
int count = 0;
// 상태를 변경하고 → build에게 다시 그리라고 알려줌
setState(() {
count++;
});
Text("$count") // 바뀐 숫자가 화면에 표시됨Flutter는 build()를 다시 실행시켜서 화면을 새로 그린다.
상태를 변경하고 → 상태에 맞춰서 UI를 바꾸는 것, 이미 우리는 해오고 있었다.
데이터를 가져오는 두 가지 방식
1. 한 번만 가져오는 데이터 (Future)
서버에 요청 → 응답 받고 끝.
2. 계속 지켜보는 데이터 — Stream
데이터가 한 번 오고 끝이 아니라, 시간이 지나면서 계속 흘러들어오는 데이터 통로다.
앱 ↔ 서버 ↔ DB캐싱(Caching)이란?
서버와 사용자 사이에는 시간 차가 존재한다.
매번 서버에 요청하면 느릴 수 있기 때문에 캐싱을 사용한다.
캐싱 = 데이터를 기억해두는 것
cache변수에는 서버의 GET 요청으로 가져온 정보들을 저장해 더 빠르게 화면에 보여준다.
Flutter 문법: 괄호와 기호 완전 정리
{ } 중괄호 — 코드 실행 범위
코드가 실행되는 범위(블록) 를 나타낼 때 사용한다.
// 함수의 실행 내용
void sayHello() {
print('hello');
}
// 버튼을 눌렀을 때 실행할 코드
onPressed: () {
print('눌림!');
}
// 조건문 / 반복문 안에서 실행할 코드
if (count > 0) {
print('양수');
}
// setState 안에서 상태를 바꾸는 코드
setState(() {
count++;
});[ ] 대괄호 — 여러 개를 목록으로 넣을 때
여러 위젯이나 값을 리스트(목록) 로 넣을 때 사용한다.
Column(
children: [ // 여러 자식 위젯을 목록으로
Text('첫 번째'),
Text('두 번째'),
ElevatedButton(...),
],
)
AppBar(
actions: [ // 우측 아이콘들을 목록으로
IconButton(...),
IconButton(...),
],
)( ) 소괄호 — 위젯 생성 & 함수 호출
위젯을 만들거나 함수를 호출할 때 사용한다.
Text('안녕하세요') // Text 위젯 생성
print('출력') // 함수 호출
setState(() { }) // setState 함수 호출: 콜론 — 파라미터 이름에 값을 전달할 때
Flutter에서 위젯에 값을 넣을 때 파라미터명: 값 형태로 쓴다. (named parameter)
Text(
'안녕하세요',
style: TextStyle(fontSize: 20), // style: 값
textAlign: TextAlign.center, // textAlign: 값
)
ElevatedButton(
onPressed: () { }, // onPressed: 실행할 함수
child: Text('클릭'), // child: 자식 위젯
), 쉼표 — 각각의 위젯(값)을 구분
위젯이나 파라미터를 구분할 때 사용한다.
마지막 항목 뒤에도 쉼표를 붙이는 게 Flutter 스타일이다. (trailing comma → 자동 포맷팅에 도움)
Column(
children: [
Text('하나'), // 쉼표로 구분
Text('둘'),
Text('셋'), // 마지막에도 쉼표 OK
],
); 세미콜론 — 문장의 끝
하나의 실행문이 끝났음을 표시한다.
int count = 0; // 변수 선언 끝
count++; // 실행문 끝
print('hi'); // 실행문 끝주의:
{ }블록 뒤에는;을 붙이지 않는다.
📋 한눈에 정리
| 기호 | 용도 | 예시 |
|---|---|---|
{ } | 코드 실행 범위 | 함수 본문, 조건문, setState |
[ ] | 목록(리스트) | children: [], actions: [] |
( ) | 위젯 생성 / 함수 호출 | Text(), setState() |
: | 파라미터에 값 전달 | child: Text(), style: ... |
, | 항목 구분 | 위젯, 파라미터 사이 |
; | 문장 끝 | 변수 선언, 실행문 끝 |
