[Flutter] 기본 용어 및 Tip
![[Flutter] 기본 용어 및 Tip](/assets/img/flutter_logo.png){kind=logo}
본격적으로 Flutter 를 사용하기에 앞서 Flutter 에서 사용하는 용어와 몇가지 Tip 을 알려드리려고 합니다.
용어
Widget
: Flutter 의 모든 시각적 요소는 Widget 이라고 불립니다. 각각의 속성에 따라 Button, Text, Row 와 같은 다름이름으로 불리기는 하지만, 기본적으로는 모두 Widget 에 해당됩니다.
Option, Property
: Dart 언어에서는 함수의 파라미터(입력값) 에 해당하는 값을 주로 파라미터의 이름과 함께 전달받습니다. 이러한 방식을 Optional Function Parameter 라고 부르기도 하고 Widget 에서는 특정 성질을 나타내기 때문에 주로 Option 이라는 단어를 사용할 것입니다.
Layout
: 레이아웃은 컴퓨터의 각 구성 요소를 제한된 공간 안에 효율적으로 배치하는 일을 뜻합니다. 때문에 Widget 의 이름이나 설명에 Layout 이라는 단어가 들어간 경우는 Widget 의 화면 배치와 관련이 있다고 생각하시면 됩니다.
Build
: 작성한 코드를 실제로 동작가능한 결과로 만드는 과정을 뜻한다.
Widget Tree
: Flutter 는 Widget 을 Tree 형태로 배치해 가며 어플을 작성하게 됩니다. root 에 가까운 위젯을 parent Widget, leaf(terminal) 에 가까운 위젯을 child Widget 이라고 하는데, 일반적으로 child Widget 은 parent Widget 의 안에 위치하며, parent Widget 의 속성을 가지게 됩니다. 쉬운 예시로 Text (글씨) 를 Button Widget 으로 감싸게 되면, Button Widget 이 parent Widget, Text Widget 이 child Widget 이 되며, 이 경우 Text 는 Button 의 기능을 가지게 될 것입니다.
BuildContext
: 현재 Widget 의 Widget Tree 에서의 위치를 뜻한다. 일반적으로 build 함수의 변수로서 (자동으로) 전달된다. 기초를 공부할 때에는 자세히 다루지 않을 계획이라 자세히 알 필요는 없지만, 실제 사용 예시가 궁금하면 이 글 을 참고하기 바란다.
State
: Application 에서 UI 를 통해서 보여지는 Data, 또는 Application 과 사용자가 상호작용 할 때 변화하는 데이터이다. 때문에 Toggle Button 과 같이 사용자와 상호작용이 필요한 부분은 StatefulWidget 으로, 이미지와 같이 사용자와 상호작용이 필요없는 경우는 StatelessWidget 으로 화면(Widget)을 작성하게 된다.
Library
: 공식적인 정의로는 “주로 소프트웨어 개발시 컴퓨터 프로그램이 사용하는 비휘발성 자원” 이지만, 간단히 누군가가 만들어둔 잘 동작하는 코드의 모음이라고 생각하면 편하다.
Hot Reload
: 작성 중인 코드가 어떤 기기(ex - emulator, chrome) 에서 동작중일 때, 코드를 수정하고 이를 동작 중인 기기에 빠르게 반영하여 실행시키고 싶을 때 사용하는 기능이다. 쉽게 “간단한 새로고침” 기능이라고 생각하면 된다. 공식적인 설명으로는 “State 는 유지하되 Widget Tree만 재구성 한다. 따라서 main() 함수와 initState() 함수는 동작하지 않는다.” 라고 되어있다. 때문에 모든 코드 수정이 반영되지는 않는다는 것을 명심하길 바란다. 다만, Application 을 종료 후 재실행 하는데는 오랜 시간이 걸리므로 해당 기능을 자주 사용하길 바란다.
Instance
: 인스턴스는 특정 클래스가 컴퓨터 자장공간에 할당된 실체를 뜻한다. 쉬운 예시로 “사람” 이라는 개념을 클래스라 하면, “철수” 라는 인물은 “사람” 클래스의 인스턴스가 된다.
Tip
StatelessWidget & StatefulWidget
: 가장 자주 사용하는 Widget 이다. 다만 구조가 생각보다 복잡한다. 하지만, stless 와 stful 입력후 enter 키를 누르고 위젯의 이름 을 입력 해 주면 쉽게 작성가능하다.
Option 보기
: 사용하고자 하는 Class(또는 Widget) 에 어떤 옵션이 있는지 궁금할 때는 해동 Class 에서 ctrl + space 를 누르면 Option 의 목록을 확인할 수 있습니다.
Class Source Code 보기
: Source Code 는 Class 을 표현하는 원본 코드를 뜻하며, Android Studio 에서는 Class 에 ctrl + 좌클릭 을 사용하여 해당 Source Code 를 확인하는 것이 가능합니다. 해당 Widget 이 어떻게 구현되어 있는지 궁금할 때 사용하시면 됩니다.
주석 처리
: 주석은 코드의 동작에는 영향을 주지않고 메모장 역할을 하는 코드를 뜻한다. 코드의 맨 앞에 // 를 작성하면 주석이 되고, 여러 줄을 주석처리 할 때는 주석 처리하고자 하는 문장을 드래그 후 ctrl + / 을 눌러주면 된다.
한 줄 삭제
: 코드의 한줄을 삭제할 때는 해당 줄에 커서를 가져다 두고(드래그 할 필요 없습니다) ctrl + x 를 누르시면 됩니다. 다만 잘라내기 기능을 사용하는 거니 클립보드에 복사된 내용이 날라갈 수 있으니 주의 바랍니다.
Show Context Actions
: 간혹 코드로 작성한 Widget 의 parent 에 해당하는 위젯을 지우거나, 특정 parent 로 감싸는 등의 동작을 하고싶은 경우가 있습니다. 이럴 경우 해당 부분을 잘라내기 하여 옮기는 것이 아니라, Widget 이름 드래그 -> 우클릭 -> Show Context Actions 클릭 -> 원하는 Action 선택 을 하면 쉽게 해결 할 수 있습니다.
코드 정리
: 코드의 들여 쓰기 등이 잘 안맞는 경우 tab 이나 shift + tab 키를 눌러서 조절할 수도 있고, ctrl + alt + l 을 눌러서 코드 자동 정리를 할 수도 있습니다. 다만, 이 경우 본인이 원하는 형식이 되지 않거나 콤마(,) 와 같은 사소한 부분에도 영향을 받을 수 있으니 주의하시기 바랍니다.
Class 와 Function 구분
: 처음 코드를 하시는 분들은 변수의 이름을 보고 Class 와 Function 을 잘 구분하지 못하는 경우가 많습니다. 이 둘은 이름의 첫글자를 보고 쉽게 구분이 가능합니다. Class 의 경우 이름의 첫글자가 대문자, Function 의 경우 첫글자가 소문자 입니다. 다만, 이것은 강제가 아니기 때문에 소문자로 시작하는 Class 와 같은 경우도 만드는 것은 가능하나, 기본적인 Dart 언어 사용자들간의 약속이기 때문에 처음하시는 분들도 이 규칙을 잘 따라주시기 바랍니다.
