자, 어제의 지난 영상에서 배운 내용을 저희 애플리케이션에 적용을 하기 전에 우선 아주 간단한 예시를
들어보려고 합니다
우선 그 예시를 보여드릴 새 프로젝트를 만들어보겠습니다
지난 강의에서 배와 선장에 대한 예시를 들었었습니다
꼭 선장이어야 할 필요는 없지만
한 가지 특출난 것이 있다는 말입니다
이것의 이름을 CaptainGame이라고 지어보겠습니다
간단합니다
이 CaptainGame의 목적은 여러분께 state(상태)와 remember(리멤버)에 대해
알려드리는 것입니다
mutable state(가변적인 상태)는 가변적인, 즉 변할 수 있는 state(상태)를
말합니다
자
여기 보시면
Gradle이 로딩되는 동안 이 애플리케이션의 기본적인 개념에 대해서 설명해드리겠습니다
이 앱은 저희가 찾은 treasure(보물)의 양과 저희가 향하고 있는 방향을 보여주는 텍스트를
띄워줄 것입니다
네
그리고 눌렀을 때 저희가 향하고 있는 방향을 볼 수 있게 해주는 button(버튼)이 하나 있을 것이고
저희가 어떤 방향을 선택하느냐에 따라 무작위의 결과로
폭풍을 향해 가거나 저희가 가진 treasure(보물)의 양이 늘어날 것입니다
이렇게 아주 간단한 애플리케이션입니다
우선 이 환영 인사 composable(컴포저블)과 미리보기는 지우고
굉장히 간단하게 진행해보도록 하겠습니다
요점은 여러분께 저희가 작업할 수 있는 일반적인 애플리케이션을 보여드리는 것입니다
제가 지금 만들 function(함수) composable(컴포저블)은 재미있는 CaptainGame
입니다
네
이것은 composable(컴포저블)이고
이 CaptainGame 내에는 저희가 찾은 treasure(보물)의 양이 나타날 것이기 때문에 val(값) treasuresFound(발견된 보물)
=remember(리멤버)
그리고 괄호 안에는 값의 mutable state(가변적인 상태) of가 들어가고
이는 0입니다
보시면 즉각적으로 두 가지 오류가 나타납니다
remember(리멤버)가 존재하지 않습니다
따라서 이 function(함수)를 import해야 합니다
remember(리멤버)가 이젠 초록색이 되었고
이젠 mutable state(가변적인 상태) of를 import해야 합니다
자 그러면 이제 오류가 없어졌습니다
그리고 저희의 mutable state(가변적인 상태)는 지금으로선 0의 값을 가집니다
그러면 이제 mutable state(가변적인 상태) of 와 remember(리멤버)가 compose runtime(실행시간), namespaces 혹은 라이브러리의 일부가 된 것을
보실 수 있습니다
그리고 이 둘이 이제 저희의 애플리케이션에 추가되었습니다
이제 그들을 사용할 수 있습니다
이렇게 생각해보십시오
remember(리멤버)는 선장의 항해일지와 같습니다
배가 어디로 갔었고 어떤 treasures(보물)들이 발견되었는지를 기억합니다
따라서 게임 안에서 저희는 remember(리멤버)를 저희가 모은 treasures(보물)들을 기억하기 위해 사용합니다
네
이것은 treasuresFound(발견된 보물) 값이고
이 mutable state(가변적인 상태)는 마치 배의 조타기와 같습니다
자
선장은 배의 방향을 바꾸기 위해 이 조타기를 돌릴 수 있고
게임 안에서는 mutable state(가변적인 상태)가 배가 향하는 방향을 업데이트할 수 있도록 해주고
treasure(보물)이 발견되었을 때나 폭풍을 마주쳤을 때 업데이트 될 것입니다
간단하게 하기 위해서 저희가 향하는 direction(방향)도 필요합니다
저희가 어느 방향을 향하고 있는지 알아야 하니
이 direction(방향)을 사용자 인터페이스(UI) 요소들을 통해 업데이트 할 것입니다
즉 저희가 사용할 button(버튼)들로 말입니다
따라서 여기에 mutable state(가변적인 상태) of를 하나 더 추가하고
이번에는 string 유형을 사용할 것입니다
보셨다시피 mutable state(가변적인 상태) of에는 다양한 유형을 사용할 수 있습니다
이제 여기에 column(컬럼)을 추가해줍니다
따라서 column(컬럼) composable(컴포저블)이 되겠습니다
이 column(컬럼)은 아이템을 쌓을 수 있도록 해주는데
우선 treasuresFound(발견된 보물)을 적은 텍스트를 하나 적고
이걸 복사해서 붙여넣어보겠습니다
이렇게 text=treasuresFound(발견된 보물): 그리고 달러기호, treasuresFound(발견된 보물), value(값)라고 적혀있는 것을 보실 수 있습니다
이제 int 유형의 mutable state(가변적인 상태)of인 treasuresFound(발견된 보물)의 값에 접근하기 위해서
variable(변수)의 이름, 온점, value(값)이 필요합니다
이는 해당 변수의 값을 접근할 수 있도록 해줍니다
이것이 저희의 텍스트의 역할입니다
서로 연결되어있는 것입니다
이 변수가 있으니 이제 이 텍스트 composable(컴포저블)은 이제 연결되었습니다
이제 같은 과정을 두번째 텍스트 composable(컴포저블)에 반복하면 되는데 이는 저희가 어떤 방향으로 가고 있는지를 알려줄
것입니다
좋습니다
direction(방향), 온점, value(값). 같은 과정입니다
그러나 이번에는 값이
String 유형입니다. direction(방향)의 mutable state(가변적인 상태)가 string을 포함하고 있기 때문입니다
방금 전에 이 mutable state(가변적인 상태) of function(함수)의 유형을 string으로 정했기 때문에
그렇게 됩니다
이젠 button(버튼)을 만들어야 합니다. onClick event(이벤트)로 저희가 클릭할
때마다
즉 onclick=을 기입하고, 여기 이 button(버튼)은 import되어야 하니
composable(컴포저블) button(버튼)을 import해봅시다
여기 이것입니다
보시다시피 여럿 다른 button(버튼) composables(컴포저블)들이 있습니다
따라서 저희는 onclick을 import해야 하고 또 button(버튼)에게 content(내용)도 부여해야 합니다
content(내용)은 저희가 띄우고 싶은 텍스트가 될 것입니다
sale East(동쪽으로 항해)를 첫 번째 button(버튼)의 content(내용)으로 하고
이 button(버튼)을 클릭했을 때 저희는 무엇을 하고 싶을까요?
여기의 이 direction(방향) 변수를 변화시키고 싶은 것입니다
따라서 이 direction(방향)이 north(북쪽) 대신 여기에서 sale east(동쪽으로 항해)라고 말하고 있으니
direction(방향)이 무엇을 말해야 할까요
direction(방향), 온점, value(값)이 east(동쪽)이 되어야 할 것입니다
direction(방향)을 바꾸는 것입니다
그리고 이젠 운에 따라 저희가 폭풍을 향해 가고 있거나
treasure(보물)을 향해 가고 있다고 해봅시다
treasure(보물)을 향해 항해하고 있다고 말입니다
if(random(랜덤))을 통해 이것을 만들 수 있습니다
이 class(클래스)를
random(랜덤)으로 지정하고
온점, 그리고 boolean(불리언) 기능을 사용할 수 있는데 이는 True나 False의 값을 주는 boolean(불리언)입니다
즉 50:50의 무작위 결과가 나오게 되니 저희가 운이 좋다면 treasure(보물)을 찾게 될 것이고 운이 좋지 않다면
treasure(보물)을 찾지 못할 것입니다
이것이 이 문장의 역할입니다
다음으로는 이 경우에 treasuresFound(발견된 보물), 온점, value(값)이 증가되어야 한다고 해보겠습니다
즉 +=1을 적습니다
그럼 이제 저의 다른 buttons(버튼)들을 위해 같은 과정을 여러 번 반복하면 됩니다
총 네 개의 buttons(버튼)이 있습니다
하나는 sailing east(동쪽으로 항해), 하나는 sailing west(서쪽으로 항해) 그리고 이것도 west(서쪽)이 되어야 합니다
다른 하나는 sailing north(북쪽으로 항해)가 되고
이것은 north(북쪽)이라고 해야 하고
그리고 하나는
잠시만 기다려주십시오
따라서
이것은 west(서쪽)
이것은 north(북쪽)이라고 해야 합니다
즉 direction(방향) 값이 north(북쪽)을 가리킨다면 button(버튼)의 텍스트도 역시 north(북쪽)이라고 해야 합니다
좋습니다
그리고 마지막으로
east(동쪽)이 있습니다
네 east(동쪽)이 있습니다
그리고 south(남쪽)도 필요합니다.
마지막 button(버튼)은 south(남쪽)이라고 합시다
이제 저희는 네 개의 요소들이 쌓여있고 텍스트를 포함하면 총 여섯 개의 요소들이
있으며
이것이 저희의 CaptainGame이 될 것입니다
이제 이것을 애플리케이션에 넣어봅시다
사용자 인터페이스(UI), 자 이제 저희가 볼 수 있는데
이 composable(컴포저블)은 표면 내에 위치할 것입니다
그렇지 않으면 지금까지 저희가 만든 것을 하나도 볼 수 없을 것입니다
지금 여러 개의 buttons(버튼)들을 복사 붙여넣기 하였는데
똑같이 작용하는데
딱 한가지 다른 점은 button(버튼)이 나타내는 텍스트와 direction(방향) 값에 저장될
내재된 텍스트가-여기 있는 이것 말하는 겁니다- 변한다는 것입니다
자
여러분께 Vals와 Vars에 대해 맨 처음에 말씀드렸었습니다
이것도 잠깐 짚고 넘어가고자 합니다
vals는 변할 수 없습니다
하지만 direction(방향) 변수 안에 넣는 것을 바꾸는 것이 아니라
direction(방향) 변수가 내재적으로 무엇인지를 변화시키는
remember(리멤버) states(상태)와 함께 작업 중이라는 것입니다
마치 여러분의 변수 안에 상자를 집어넣는 것과 같습니다
네
상자 안의 내용물은 변할 수 있습니다
그러나 상자는 변하지 않는다는 것입니다
언제나 같은 상자입니다
그런데 상자 안에 무엇이 들어있는지가 변하는 것입니다
이렇게 말씀드리면 아마 이 mutable state(가변적인 상태)를 이해할 수 있으실 것입니다
네
이제 앱을 실행시켜서 buttons(버튼)들을 지켜보고 어떻게 텍스트나 변수의 내용을 사용자 입력을 반영하여
수정할 수 있는지
보도록 합시다
자
여기 저희의 애플리케이션이 treasures found(발견된 보물) 0개, current direction(현재 방향) north(북쪽)이라고 하고 있습니다
sail east(동쪽으로 항해)를 해보겠습니다
보시면 treasure(보물)을 찾지는 않았지만 사용자 인터페이스(UI)는 업데이트하였습니다
제가 사용자 인터페이스(UI)를 지금 바꾸라고 직접 말하지는 않았지만
제가 방금 한 것은 변수의 값을 바꾼 것이고 그것이 '아, 값의 변화가 생겼으니 사용자 인터페이스(UI)를 업데이트해야겠구나'로
인식된 것입니다
이것이 states(상태)의 멋진 점입니다
여러분이 사용자 인터페이스(UI)를 직접 관리할 필요가 없이
states(상태) 혹은 Kotlin을 통해 알아서 해결된다는 것입니다
알아서 이해를 하는 것입니다
'그래'
'내 값이 바뀌었네'
'그럼 나는 사용자 인터페이스(UI)를 바꿔야 하겠구나. 왜냐하면 나는 이 사용자 인터페이스(UI)의 요소 안에서 사용되고 있으니까' 그리고 해당 요소는
바로 이 텍스트입니다
여기 이것입니다. current direction(현재 방향)은 계속해서 변화하고 있고treasures found(발견된 보물)은 저희가 treasure(보물)을 마주치거나
그러지 않았을 때에만 변화합니다
50:50의 가능성입니다
지금 east(동쪽)으로 항해하고 있으니
north(북쪽)으로 항해해봅시다
좋습니다
여전히 운이 없었습니다
이젠 south(남쪽)으로 가봅시다
드디어 무언가 발견했습니다
저희가 처음엔 east(동쪽)으로 항해했고
그 다음엔
north(북쪽)으로
그리고 이번엔 south(남쪽)으로 왔습니다
이해가 되십니까?
네
위아래로 움직여보는 것입니다
드디어 treasure(보물)을 찾았습니다
이번엔 west(서쪽)으로 가봅시다
이번에는 다시 운이 좋았습니다
또 다른 treasure(보물)을 발견했습니다
이번엔 east(동쪽)으로 가봅시다
와!
이거죠, 연속으로 찾고 있습니다
세 개의 treasures(보물)을 연속해서 발견했습니다
자, 무척 못생긴 예시이긴 하지만 전체적으로 어떻게 작동하는지를 알려주는 예시입니다
states(상태)의 개념이 작동하는 지를 보여준다는 것입니다
여러분이 아직 헷갈리고 '이해 못하겠어요
state(상태) 이러쿵 저러쿵' 하실 수도 있습니다
그러니 이제 아주 간단하고 낮은 레벨로 쪼개서 살펴봅시다
여러분에게 다르게 대해야 하는 변수들이 있다고 생각해봅시다
여러분의 사용자 인터페이스(UI)를 위해 특별하게 취급해야 하는 것입니다
즉 여러분이 변수들이 변했을 때 여러분의 핸드폰에서 볼 수 있는 것들이 업데이트 되기를 바란다면 그 변수들을
지금까지 보여드린 것처럼 취급해야 합니다
이 remember(리멤버) 키워드를 사용해야 합니다
그리고 중괄호 안에는 여러분이 사용하고자 하는 데이터 유형의 변수와 mutable state(가변적인 상태) of를
사용해야 합니다
자
여러분이 변수 direction(방향)을 composable(컴포저블) 내에서 직접적으로 사용하고 싶다면
direction(방향)의 값을 사용하는 것입니다
그리고 나서 그 데이터 유형이 mutable state(가변적인 상태) of이고 remember(리멤버)되었음을 확실히 해야 합니다
그러면 저희의 애플리케이션이 remember(리멤버)할 것입니다
'맞다 뭔가 변화가 생기면 사용자 인터페이스(UI)를 업데이트 해야
하지' 하고 말입니다
'따라서 이 변수를 remember(리멤버)하고'
'완전히 집중해야 해'
'remember(리멤버) 이 direction(방향)이 뭔지 기억해'
그리고 direction(방향)이 변화했을 때 '아! 나 remember(리멤버)해야지 사용자 인터페이스(UI) 업데이트 해야지'하고
사용자 인터페이스(UI)를 업데이트 시킵니다
이것이 여기서 일어나고 있는 것의 기본적인 흐름입니다
이 영상이 여태까지의 영상 중 제일 긴 것 같은데 더 빠르게 전달하지 못해 죄송합니다
그러나 이 예시가 이해를 하는 데에 꼭 필요하다고 생각이 여전히
듭니다
자, 이제 여러분께 약간의 도전을 드릴 것인데 여러분이 텍스트를 하나 추가하셔야 합니다
저희가 운이 좋아서 treasure(보물)을 찾았는지 아니면 찾지 못했는지입니다. 왜냐하면 저희가 어쩌면
폭풍을 마주하고 문제가 생겼을 수도 있으니 말입니다
심지어는 저희에게 HP가 얼마나 남아있는지를 보여주는 변수를 추가할 수도 있습니다
혹은 저희 배의 상태나 선원들의 상태가 어떤지도 가능합니다
만약 저희가 너무 많은 폭풍을 마주했다면 길을 잃고 생존할 확률이 너무 적어졌을 수도
있으니 말입니다
네, 이번 강의는 여기까지 입니다
다음 강의에서 뵙겠습니다