돌아오신 것을 환영합니다
이번 동영상에서는 우리만의 Composable(컴포저블)을 직접 생성해 볼 것입니다
얻고자 하는 결과물은 조그마한 텍스트가 표시되는 유저 인터페이스(UI)입니다
그 다음 사용자가 값을 입력할 수 있는 text field(텍스트 필드)가 있습니다
그 다음에는 두 가지 선택지가 있으며, 결과도 그 아래에 텍스트로 표시될 것입니다
어떻게 이것을 만들어 낼 수 있을까요?
이를 위하여 Composable들을 생성하여야 하는 것입니다
전에도 말씀드렸듯이 Composable은 특수한 함수입니다
그리고 Composable을 직접 만들기 위해서는 @Composable 키워드를 사용하여야 합니다
@Composable을 사용하기 위해서는 위쪽에 있는 이 compose library(라이브러리)들을 import하여야 하는데
이는 자동으로 이루어집니다
이 Composable을 이용하면 @Composable 키워드를 사용하여
그 다음에 오는 것이 사용자 인터페이스 요소이거나, 그렇게 취급되어야 한다고 지시할 수 있습니다
더 제대로 설명하겠습니다
말하자면 이것은 compiler(컴파일러)에게 어떤 function을 선언적으로 취급하라고 명령하여,
프레임워크에게 이 function은 UI의 일부가 composition(컴포지션)과 recomposition(리컴포지션)이 가능하도록 하기 위한 것임을 알립니다
즉 UI 요소를 display(표시)하거나 숨기고, display 방식을 경우에 따라
변경하는 일을 말합니다
이것이 Jetpack Compose가 사용자 인터페이스를 render(렌더)하는 데 사용하는 개발자 접근 방식입니다
사용자 인터페이스 요소를 display하는 방식에 있어 XML과 차이점이 있습니다
아직 다루지 않았습니다만, 나중에 아시게 될 것입니다
여기 보이시듯이 Composable 키워드가 붙어 있을 때에는 function이 Composable로 인식됩니다
그리고 Composable 키워드 앞에 @ 키워드가 와야 합니다
그렇지 않으면 이 Composable이 무슨 뜻인지 이해하지 못합니다
그러므로 @를 앞에 붙이셔야 합니다
이렇게 하면 복잡한 UI 구조를 단순화하여 composition(컴포지션)을 가능하게 합니다
UI의 rendering(렌더링)과 업데이트를 state(상태)와 data(데이터)가 변하면 자동으로 해 주는
declarative(선언성) UI를 활성화합니다
그건 또 무엇이냐고요?
나중에 state와 data에 대하여 알아 볼 것인데 말입니다
data는 사용자 인터페이스(UI)에 지속적으로 영향을 미칩니다
data가 변하면 사용자 인터페이스도 변화하여야 합니다
또한 사용자 인터페이스가 data에 변화를 가하면, data가 변화하고 따라서
사용자 인터페이스 역시 변화하는데, 이는 무언가 변화가 발생하면
화면이 refresh(리프레시)되도록 하여야 한다는 것입니다
예를 들어 아무것도 변하지 않는다면, 화면을 자주 refresh할 필요가 없습니다
그런 이유에서입니다
data의 상태는 사용자 인터페이스를 display할 때에 중요한 역할을 합니다
오늘과 다음날의 동영상에서 배우게 될 내용입니다
그러면 우리의 사용자 인터페이스는 어떻게 얻는 것일까요?
아주 빠르게 테스트를 할 수 있습니다
여기에 인삿말이 있습니다
Hello라고 되어 있습니다
그리고 애플리케이션에서도 인삿말이 표시됩니다
Hello 다음에 이름이 표시됩니다
이 Greeting function을 call(호출)하거나 사용자 인터페이스를 display할 때 표시되도록 pass한 이름은
Android였습니다
이제 Greeting을 두 번 실행한 다음 애플리케이션을 다시 실행하여
무슨 일이 일어나는지 한 번 봅시다
좋습니다
이러면 애플리케이션이 실행됩니다
아직도 인삿말은 한 번만 표시됩니다
Hello Android
왜 이렇게 될까요?
왜냐하면 Greeting function은 두 번 실행되었지만
둘 중 어느 것이 먼저 와야 하는지는 구분되지 않았기 때문입니다
그래서 (텍스트가) 어디에 위치하여야 하는지 모르는 것입니다
그러면 열과 행이 필요하다는 것이 이해가 됩니다
그러면 이제 Composable을 직접 생성하겠습니다
@Composable이라고 입력합니다
이 function은 UnitConverter라고 부르겠습니다
지금 우리가 만들고자 하는 것이지요
단위 변환기 애플리케이션을 만들고 있으니까 말입니다
이제 이 function 안에 다른 Composable들을 넣겠습니다
이 function은 Composable이기 때문에 내부에 Composable을 사용할 수 있습니다
Composable이 아니라면 사용할 수 없습니다
이제 Column(열)을 생성합니다
그리고 그 Column 내부에 Row(행)들을 생성합니다
이렇게 하면 격자처럼 생긴 모델을 만들 수 있습니다
좋습니다
이 Column 내부에 여러 개의 Row가 있는데, Row도 Composable 중 하나입니다
보시면 @Composable이라 되어 있습니다
Row function에게는 modifier(수정자), horizontalArrangement(수평 배열), verticalAlignment(수직 배열) 그리고 content가 필요합니다
content는 Composable type이어야 합니다
이제 Column 내부에 Row를 생성하겠습니다
그리고 Column에는 UI 요소들이 하나씩 쌓일 것입니다
좋습니다
이는 텍스트를 추가한 다음 또 다른 텍스트를 추가한다면, 새로운 텍스트는 맨 윗 줄에 나타난다는 뜻입니다
테스트해 보도록 하겠습니다
해봅시다
Greeting Composable을 사용하기 위하여 call(호출)합니다
그리고 Greeting 대신 이곳에는 UnitConverter를 사용합니다
이제 Surface는 UnitConverter의 content를 가질 것입니다
지금 UnitConverter에게는 Column밖에 없기 때문에 다시 실행하겠습니다
비어 있는 Row가 있지만, Column이 두 개입니다
어떻게 생겼는지 봅시다
이제 텍스트 여러 줄을 쌓을 수 있게 되었습니다
Row에 집어넣는다면 어떻게 될까요?
해봅시다
이제 다시 실행하여 보면, 'Hello Android' 두 개가 나란히 있습니다
세로 방향이 아닌 가로 방향으로 쌓였습니다
그렇기 때문에 Hello Android 옆에 다른 Hello Android가 있습니다
이게 Column(열)과 Row(행) 간의 차이입니다
저는 이렇게 설명하겠습니다
여기에도 추가해 주도록 하겠습니다 "Here all the UI elements will be stacked below each other"
이 경우에 UI 요소들은 옆 방향으로 쌓입니다 "Here all the UI elements will be stacked next to each other"
이 시점에서 잠시 쉬는 시간을 가지는 것이 좋을 것 같습니다
이런 사소한 것들을 우선해서 보여드리고 싶었습니다
다음에도 사용자 인터페이스 작업을 계속하겠습니다
좋습니다
다음 영상에서 뵙겠습니다