돌아오신 것을 환영합니다
이번 동영상에서는 텍스트 필드를 이용하여 애플리케이션에서 텍스트를 입력할 수 있도록 하는 방법을 알아보겠습니다
텍스트 입력 필드는 사실 세 가지 종류가 있습니다
격자나 Greeting 관련 내용은 없애 줍니다
이제 Greeting function(함수)는 더 이상 필요가 없습니다
이 중에서 필요한 것은 이 Text Composable(컴포저블) 하나입니다
하지만 이것도 우리는 직접 만들 수 있습니다
그러니 이 Composable은 아예 삭제하겠습니다
누군가에게 인사(greeting)를 하지는 않을 것입니다
우리가 만든 UnitConverter Composable을 부모 Composable과 같이 사용할 것입니다
사용자 인터페이스(UI) 내용은 모두 이것 내부에 들어가는 것입니다
그러면 텍스트는 어떻게 표시되도록 할 수 있을까요?
어떻게 하냐면 우선 Column을 이용하여 Text Composable을 생성하겠습니다
그러면 Text Composable의 최소 조건은 text의 content(내용) 을 가지는 것입니다
즉 text의 속성이 되겠으며, 이곳에 텍스트를 pass하여야 합니다
이 text는 Unit Converter라고 부를 것입니다
이것 외에 필요한 것으로는
실제로 텍스트를 입력할 수 있는 필드가 필요합니다
이를 위하여는 텍스트 필드 Composable 중 하나를 사용하여야 합니다
텍스트 필드를 추가하도록 해 주는 Composable은 세 가지가 있습니다
그리고 세 개 모두 서로 property(속성)에 약간씩 차이가 있으며
생김새와 기능도 조금씩 다릅니다
하나는 여기 보실 수 있는 TextField이며
다른 하나는 이곳에 보이는 BasicTextField
그리고 마지막으로 OutlinedTextField가 있습니다
저는 아래쪽에 보이는 OutlinedTextField를 사용하겠습니다
그런데 OutlinedTextField도 두 가지가 존재합니다
하나는 string을 요구합니다
다른 하나는 main value가 TextFieldValue입니다
이 둘의 차이점은 value change를 실행하고 싶을 때 pass(전달)하여야 하는 값이 다르다는 것입니다
value change는 무엇일까요?
값(value)이 바뀌는(change) 순간 실행되어야 하는 무언가를
뜻합니다
그렇다면 OutlinedTextField 내부의 값이 바뀔 때 무엇이 실행되도록 하여야 할까요?
이곳에 무언가를 입력해 주면
이 Composable 보고 어떻게 하라는 뜻이지요?
이 텍스트 필드에 새로운 텍스트가 입력될 때 어떻게 할 지 알려주어야 합니다
이곳에는 텍스트를 입력할 것입니다
사용자 인터페이스에 있던 내용을 입력하려고 하는데
무엇이었는지 확인하겠습니다
value는 "Enter Value"라고 입력하여야 합니다
이것은 엄밀히 말하면 텍스트 값은 아닙니다
사용자에게 무엇을 입력하여야 하는지 알려주는 역할을 합니다
어떻게 이렇게 할 수 있는 것이냐면
onValueChange와 textStyle, 그리고 placeholder가 보입니다
placeholder에 대한 설명을 드린 것이었습니다
이것은 placeholder(플레이스 홀더)로, 사용자에게
텍스트 필드에 무엇을 입력해야 하는지 보여주는 것입니다
그리고 텍스트는 VisualTransformation의 지원을 받는 중입니다
아무 이상 없습니다
이것 외에 필요한 것으로는
생성하여 놓은 function의 OutlinedTextField에게는
value와 onValueChange가 주어져야 합니다
없으면 오류가 발생합니다
onValueChange를 pass하여 주지 않으면
OutlinedTextField는 제대로 기능할 수 없습니다
그러니 value가 변했을 때 무엇을 하여야 하는지 알려주어야 합니다
사실 아무것도 하지 말라고 지시해도 됩니다
여기에 괄호를 입력하겠습니다
이곳에 value가 변하였을 때 일어날 일에 대한 논리를 구현할 수도 있습니다
원래는 무언가 실행되도록 하여야 합니다
하지만 지금으로서는 구현까지 하려는 것이 아니므로
그냥 아무것도 하지 말라고 알려주어도 됩니다
"이곳에는 OutlinedTextField의 value가 변하였을 때
실행되어야 할 것을 입력하여야 합니다"
이 괄호 안에 들어가야 할 내용입니다
제대로 보이도로 줄을 바꾸어 놓겠습니다
OutlinedTextField가 닫히지 않았다고 경고하고 있습니다
이렇게 했더니 각주의 일부가 되어 버렸습니다
code execution piece 두 개가 비어 있는 것과 같습니다
code execution piece(코드 실행 조각)는 무엇이냐고요?
그것은 anonymous function의 일종입니다
anonymous function은 또 무엇이냐고요?
anonymous function(익명 함수)는 이름이 없어 call(호출)할 수는 없지만
실행은 가능한 function(함수)를 뜻합니다
local final fun anonymous 라고 되어 있습니다
이것에게 String(문자열)을 pass하면 Unit이 돌아옵니다
내용이 너무 복잡해지려고 합니다
아무튼 그것이 onValueChange의 역할입니다
String(문자열)을 pass하면 Unit(단위)를 내놓습니다
실제로 사용하며 실행해 보면 제 말이 무슨 뜻인지 이해가 되실 것입니다
지금은 아무 일도 일어나지 않아도 되지만
나중에는 무언가 실행이 되도록 하여야 합니다
텍스트 필드에 입력하면 변화가 발생하여야 합니다
자, 이제 코드를 실행해 보면서 이번 동영상에서
배운 것을 요약하여 봅시다
여기 Column이 있으며, Column 내부에는 Row가 있습니다
그런데 Row 위에는 Text도 있습니다
다음으로 OutlinedTextField가 있습니다
실제로 어떻게 나타나는지 봅시다
Unit Converter(단위 변환기)라고 쓰여 있습니다
그 아래에 윤곽 있는 텍스트 필드가 있습니다
잠시 환경설정으로 가서 흰색 테마로 다시 변경하겠습니다
기본으로 설정된 테마로 보여드려서
헷갈리지 않으시도록 하고 싶습니다
이제 여기 Unit Converter라는 텍스트가 표시되어 있으며
여기 있는 것이 윤곽선 있는 텍스트 필드입니다
이곳에 무언가 입력을 하여도 아무 변화 없습니다
사용자 인터페이스가 업데이트되고 있지 않습니다
아무 일도 일어나지 않습니다
다음 동영상에서 무슨 일이 일어나도록 만들겠습니다
하지만 멋진 점은 그 때 코드를 실행시키는 방법은 이
onValueChange를 이용하는 것이라는 점입니다
윤곽선으로 예쁘게 둘러싸인 이 부분의
value(값)에 수정을 가할 때마다
이름은 없지만 function처럼 기능하는 이 anonymous function(익명 함수)을 실행되게 할 수 있습니다
이번 동영상은 여기까지입니다
다음 영상에서 뵙겠습니다