자
이제 dropdown menu(드롭다운 메뉴)와 Unit Converter(단위 변환기)로 돌아가봅시다
그리고 드디어 그것에 state(상태)를 적용해봅시다
왜냐하면 이제 여러분이 state(상태)에 대해 배우셨고
이제 state(상태)와 remember(리멤버) 키워드를 사용할 수 있기 때문입니다
그리고 그것들을 저희 애플리케이션에도 적용할 수 있습니다
저희가 도출해야 하는 값이 무엇이냐 하면
우선 입력 값을 알아야 합니다
즉, 사용자가 입력한 것
그리고 이 밑에서는 출력 값을 필요로 합니다
단위에 맞는 값이 필요합니다
따라서 입력 값의 단위를 알아야 하고
출력 값의 단위도 알아야 합니다
여기 이것을 보면
저희가 필요한 네 개의 states(상태)들입니다
그 다음엔 저희가 사용할 것들의 multiplier(승수)를 알아야 합니다
conversion rate(전환율)이라고도 할 수 있겠습니다
그리고 마지막으로 입력이 확장되었는지를 알아야 합니다
즉 간단히 말해 이 사용자 인터페이스(UI)는 확장되었거나 확장되어있지 않은데
이 dropdown menu(드롭다운 메뉴)도 마찬가지여야 합니다
dropdown menu(드롭다운 메뉴)들도 자신의 state(상태)를 알아야 합니다
그것들이 열려있는지 열려있지 않은지를 알아야 합니다
즉 확장되었거나 확장되어있지 않거나를 말하는 것입니다
따라서 이 모든 것들이 저희의 애플리케이션 안에서 변수로 설정되어야 합니다
이제 필요한 변수들을 전부 만들어봅시다
필요할 states(상태)들 말입니다
제가 말 했듯이 inputValue(입력값) by remember(리멤버)가 필요하고 괄호 안에 mutable state(가변적인 상태) of가 필요합니다
그리고 나서 string을 사용해주겠습니다
그리고 remember(리멤버)를 import해준 후
state(상태) get value(값)도 마찬가지로 import해주고
mutable state(가변적인 상태) set value(값)까지 import하겠습니다
자, 이제 저희가 다음의 몇 가지를
import 해주었습니다
getvalue,
Mutable state(가변적인 상태) of, set value,
그리고 remember(리멤버)입니다
이제 이 모든 runtime(실행시간) namespaces 혹은 라이브러리들이 추가되었습니다
저희는 지금 저희의 Unit Converter(단위 변환기) function(함수) 내에 있습니다
그나저나 이것은 저희가 지금 곧바로 바꿀 수 있기 때문에 var이여야 합니다
이제는 더 이상 감싸는 treasure chest(보물 상자)가 없고 곧바로 금화들에 접근하고
있습니다
따라서 저희가 여기서 val 대신 var을 사용하고 있음을 확실히 해야 합니다. 그렇지 않다면 값을 한 번밖에
할당할 수 없게 되기 때문입니다
자 이제 저희가 필요한 다른 변수들을 만들어봅시다
input value(입력값)이 필요하고
output value(출력값)이 필요합니다
outputValue(출력값)이라고 적고
그리고 이 by remember(리멤버)를 복사하고 매번 조금씩만 수정을 해줄 것입니다
그 후에는 input unit(입력 단위)가 필요합니다
마지막에 어떤 단위인지를 알아야 하기 때문입니다
초기 설정으로 센티미터를 사용할 것입니다
그리고 다음으론 output unit(출력 단위)가 필요합니다
이것은 초기 설정으로 미터입니다
간단합니다
그리고 다음으론 var iExpanded(입력 확장됨)이 있습니다
이 변수가 포함해야 하는 것은 False 또는 True 값이고 저는 초기 설정으로
False로 하겠습니다
그럼 이것이 저희의 dropdown menu(드롭다운 메뉴)가 됩니다
제가 하고자 하는 말은 이 dropdown menu(드롭다운 메뉴)가 열려있어야 하냐 아니면 닫혀있어야 하냐입니다
로딩이 되고 있어서
dropdown menu(드롭다운 메뉴)를 보여드릴 수가 없는데
되었습니다
보시면 초기 설정에 따라 열려있지 않고
닫혀있어야 함을 볼 수 있습니다
그것이 달성하고자 하는 바인데
이 iExpanded(확장됨)가 그 역할을 할 것입니다
그리고 출력 확장됨을 의미하는 var oExpanded(출력 확장됨)을 적습니다
iExpanded(입력 확장됨)은 입력 확장됨을 의미합니다
입력 button(버튼)인 것입니다
그리고 이것도 마찬가지로 초기 설정으로 False로 하겠습니다
즉 unexpanded(확장되지 않음)이 되는 것인데 이는 무너졌다는, 닫혔다는 말입니다
동시에 선택할 수 있는 옵션이 더 이상 열리지 않는다는 말입니다
다음으로는 conversion factor(전환 요소)를 만들 것입니다
remember(리멤버) mutable state(가변적인 상태) of인 conversion factor(전환 요소)를
즉 여기서는 by 키워드를 사용하지 않습니다
여기선 곧바로 사용하고 있습니다
할당하는 것입니다
그리고 유형은 double이여야 합니다
네
이건 기본적으로 multiplier(승수)가 될 것입니다
conversion factor(전환 요소)가 곱하기 100 혹은 나누기 100이어야 하는데 이는 1 센티미터가 1미터의
100분의 1이기 때문입니다
이것이 기본적으로 이 conversion factor(전환 요소)가 저희를 도와줄 방법입니다
이 영상에선 이 중 하나를 골라서 사용해보겠습니다
그리고 다음 영상에서는 나머지를 전부 만들어보도록 합시다
제가 지금 변형할 것은 이 outlined text field(테두리 쳐진 텍스트 창)입니다
왜냐하면 생각해보시면 이 outline text field 계속해서 존재는 했지만 아무것도 하지 않고 있었습니다
여태까지 달리 뭘 할 수 없었던 것입니다
그저 있기만 했습니다
아무것도 하지 않았습니다
그럼 이걸 어떻게 바꿀 수 있을까요?
조금 전에 초기 설정 값은 빈 string(열)이여야 한다고 했었습니다
그렇죠
그러나 저희는 그 안에 무언가 입력을 해도 아무 일도 일어나지 않았기 때문에 무언가 바꿀 수가 없었습니다
여기 있는 이것을 보시면 심지어는 열 수도 없습니다
이 Unit Converter(단위 변환기) 입력 field(필드)에 아무것도 일어나지 않고 있습니다
대신 이 outline text가
바로 저희의 input value(입력값)이 되어야 하는 것입니다
즉 이 inputValue(입력값)을 remember(리멤버)로 가지고
저희가 뭔가 일으키고 싶어서 값을 바꾸면
무언가 입력을 하면
여기 회색으로 된 부분을 보시면 it string이라고 하고 있습니다
이 on value change가 주는 것이 it value(값)인데 그 유형이 string이라는 것이고 이는
값이 변했을 때 같이 변할 것이라는 뜻입니다
즉 무엇이든지 이 창에 입력을 하는 것이 이 it이 될 것이라는 말입니다
따라서 저희는 inputValue(입력값)이 it이 되어야 한다고 할 수 있습니다
여기 이 회색으로 칠해진 string 유형의 it입니다
거의 안보이긴 하지만
자 이제 애플리케이션을 작동 시켜보면 작은 문제가 하나 발견될 것입니다
저희가 이 outline text field와 input을 만들었는데 가동되지 않습니다
왜 안되는 것일까요
왜 클릭을 할 수 없는 것일까요
그 이유는 저희가 두 개의 dropdown menu(드롭다운 메뉴)를 모두 열린 혹은 확장된 상태로 두었기 때문입니다
그리고 그렇게 하면 사용자 인터페이스(UI)가 막힙니다
모든 것을 막고 있는 것입니다
여기 이 두 개가 모든 것을 막고 있기 때문에 아무것도 할 수가 없는 것입니다
이것을 어떻게 끌 수 있는지 기억하시나요?
동영상을 잠시 멈추고 기억해내보셔도 좋습니다
작은 팁을 드리자면
dropdown menu(드롭다운 메뉴) 안에 있을 겁니다
좋습니다
여러분이 시도해보셨길 바랍니다
기본적으로 이 expanded(확장됨)입니다
따라서 이 True 대신 두 개의 dropdown menu(드롭다운 메뉴)를 모두 False로 설정을 해주어야 합니다
여기 이것도 False라고 해야 합니다
둘 다 False로 넣어주고
이제 사용자 인터페이스(UI)가 어떻게 반응하는지 봅시다
그리고 저희의 outlined text field(테두리 쳐진 텍스트 창)에 뭔가 적을 수 있는지를 말입니다
좋습니다
여기 있습니다
제 경우에는 모든 것이 무너졌습니다
사실은 제 프로그램이 다시 무엇이라도 할 수 있게 하기 위해서 제 PC를 아예 다시 시작해야 했습니다
그러나 여기 보시면 이제 이것들이 더 이상 확장되어있지 않음을 보실 수 있습니다
이제 dropdown menu(드롭다운 메뉴)와 사용자 인터페이스(UI)가 더 이상 막혀있지 않습니다
그리고 이제 저희가 무언가 바꿀 수 있습니다
이제 여기에 'Hello World'라고 적을 수 있습니다
좋습니다
드디어 다시 작동을 하게 만들었습니다
네 이게 대강 전부입니다
대강 전부 보여드렸습니다
이제 outlined text field(테두리 쳐진 텍스트 창)의 state(상태)를 변화시킬 수 있고
input value(입력값)이 무엇이든 간에 사용자 인터페이스(UI)에 자동적으로 반영이 됩니다
스스로 자동적으로 되는 것은 아니고
저희가 실행시켰습니다
좋습니다
그리고 다음 강의로 넘어가기 전에 마지막으로 하나 짚고 넘어가고 싶은 것이
outlined text field(테두리 쳐진 텍스트 창)에 parameter(매개변수)를 하나 더 추가하는 것입니다
저희의 outlined text field(테두리 쳐진 텍스트 창)를 보시면 value(값), 반점, on value changed
그리고 그 뒤에 중괄호 다음에 반점을 하나 더 추가할 수 있습니다
분리된 아이템들인 것을 볼 수 있도록 분리된 줄로 두도록
하겠습니다
반점은 여기에 유지하고 이것을 다음 줄로 넘기겠습니다
여기에 이제 무엇인가 추가할 것인데
바로 label(라벨)입니다
좋습니다
여기 이 label(라벨) property(속성)은 저희 outlined text field(테두리 쳐진 텍스트 창)도 가지고 있는데 선택적이었고
반드시 기입할 필요는 없었지만
여기 보실 수 잇습니다
composable(컴포저블)의 한 유형인 label(라벨)입니다
네
중괄호 안에 labe(라벨)인 composable(컴포저블)을 추가해야 합니다
하나의 추가적인 텍스트를 label(라벨)로 추가하면 됩니다
그리고 'enter value(값을 입력하세요)'가 저희가 보는 label(라벨)이 된다고 하겠습니다
좋습니다
다시 가동해보겠습니다
그리고 그나저나 실시간 수정이라는 것에 대해서 전해 들었는데
이후 강의부터는 그것을 사용해서 이 수정이 더 빠르게
진행되도록 하고자 합니다
이제 이 label(라벨)이 'enter value(값을 입력하세요)'라고 하고 있는 것을 볼 수 있습니다
저희가 뭘 해야 하는지 알려주고 있는 셈입니다
이번 강의는 이정도에서 마무리할 수 있습니다
다음 강의에서는 저희의 다른 states(상태)들을 실행시켜볼 것입니다
저희의 사용자 인터페이스(UI) 아이템들을 위한 다른 remember(리멤버) states(상태)들 말입니다
다음 강의에서 뵙겠습니다