Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose Camp 2022 비기너 트랙, 단원 2: 앱 UI 빌드

남우진
October 26, 2022

Compose Camp 2022 비기너 트랙, 단원 2: 앱 UI 빌드

DevFest와 함께하는 Compose Camp 2022 초심자를 위한 트랙!

단원 2: 앱 UI 빌드 영상 속 강의자료 입니다.

남우진

October 26, 2022
Tweet

Other Decks in Programming

Transcript

  1. This work is licensed under the Apache 2.0 License Compose

    Camp Compose 사용 시 알아야 하는 Android 기본사항
  2. This work is licensed under the Apache 2.0 License 우진

    남 Google Developer Student Clubs PKNU 캠핑지기
  3. This work is licensed under the Apache 2.0 License 단원

    2: 앱 UI 빌드 과정1. Kotlin 기초 과정2. 앱에 버튼 추가 과정3. UI 및 상태와 상호작용
  4. This work is licensed under the Apache 2.0 License null

    사전적 의미 - 어떠한 값도 지니지 않음 프로그래밍에서는? - 빈 칸 - ‘0’ 또는 “(공백)” 조차도 존재하지 않음 - 🔥 NullPointerException 󰷺 I’m EMPTY…
  5. This work is licensed under the Apache 2.0 License 안전

    호출 & 어설션 연산자 ?. : 안전 호출 연산자 - null일 경우 엑세스 시도를 중지하고 null을 반환함 !! : 어설션 연산자 - nullable로 선언했지만, 이 값은 절대 null일리가 없다는 것을 알려줌
  6. This work is licensed under the Apache 2.0 License fun

    main() { var favoriteActor: String? = null println(favoriteActor) // 출력 결과는 “null” println(favoriteActor?.length) // 출력 결과는 “null” println(favoriteActor.length) // null safe 오류 발생! println(favoriteActor!!.length) // NullPointerException 오류 발생! }
  7. This work is licensed under the Apache 2.0 License class?

    객체를 정의하고 만들어 내기 위한 ‘틀' 또는 ‘설계도' - 내가 원하는 UI나 로직(계산식)을 구현하는 곳 - class 안에는 객체 생성을 위한 변수와 메서드 < class 정의 문법 > < 인스턴스 생성 >
  8. This work is licensed under the Apache 2.0 License 클래스?

    객체? 인스턴스? 클래스 (class) - 객체를 만들어 내기 위한 ‘틀' 또는 ‘설계도’ 객체 (object) - 클래스에 선언된 모양 그대로 생성된 실체 그 자체! 인스턴스 (instance) - 클래스가 메모리에 할당되어 사용가능하도록 만들어진것
  9. This work is licensed under the Apache 2.0 License class

    Animal { var name: String = “” var age: Int = 0 constructor (name: String, age: Int) { this.name = name this.age = age } fun introduce() { println(“이름은 ${name}이고, ${age}살 입니다.”) } } fun main() { val puppy = Animal(“아리”, 5) println(puppy.name) // 출력 결과는 “아리” println(puppy.age) // 출력 결과는 “5” puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” }
  10. This work is licensed under the Apache 2.0 License ->

    클래스 class Animal { var name: String = “” var age: Int = 0 constructor (name: String, age: Int) { this.name = name this.age = age } fun introduce() { println(“이름은 ${name}이고, ${age}살 입니다.”) } } fun main() { val puppy = Animal(“아리”, 5) println(puppy.name) // 출력 결과는 “아리” println(puppy.age) // 출력 결과는 “5” puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” }
  11. This work is licensed under the Apache 2.0 License ->

    인스턴스 변수 class Animal { var name: String = “” var age: Int = 0 constructor (name: String, age: Int) { this.name = name this.age = age } fun introduce() { println(“이름은 ${name}이고, ${age}살 입니다.”) } } fun main() { val puppy = Animal(“아리”, 5) println(puppy.name) // 출력 결과는 “아리” println(puppy.age) // 출력 결과는 “5” puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” }
  12. This work is licensed under the Apache 2.0 License ->

    생성자 class Animal { var name: String = “” var age: Int = 0 constructor (name: String, age: Int) { this.name = name this.age = age } fun introduce() { println(“이름은 ${name}이고, ${age}살 입니다.”) } } fun main() { val puppy = Animal(“아리”, 5) println(puppy.name) // 출력 결과는 “아리” println(puppy.age) // 출력 결과는 “5” puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” }
  13. This work is licensed under the Apache 2.0 License ->

    매서드 (함수) class Animal { var name: String = “” var age: Int = 0 constructor (name: String, age: Int) { this.name = name this.age = age } fun introduce() { println(“이름은 ${name}이고, ${age}살 입니다.”) } } fun main() { val puppy = Animal(“아리”, 5) println(puppy.name) // 출력 결과는 “아리” println(puppy.age) // 출력 결과는 “5” puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” }
  14. This work is licensed under the Apache 2.0 License class

    Animal { var name: String = “” var age: Int = 0 constructor (name: String, age: Int) { this.name = name this.age = age } fun introduce() { println(“이름은 ${name}이고, ${age}살 입니다.”) } } fun main() { val puppy = Animal(“아리”, 5) println(puppy.name) // 출력 결과는 “아리” println(puppy.age) // 출력 결과는 “5” puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” }
  15. This work is licensed under the Apache 2.0 License =>

    인스턴스화 class Animal { var name: String = “” var age: Int = 0 constructor (name: String, age: Int) { this.name = name this.age = age } fun introduce() { println(“이름은 ${name}이고, ${age}살 입니다.”) } } fun main() { val puppy = Animal(“아리”, 5) println(puppy.name) // 출력 결과는 “아리” println(puppy.age) // 출력 결과는 “5” puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” }
  16. This work is licensed under the Apache 2.0 License 클래스

    간의 관계 동물 강아지 새 부모 클래스 (Parent) = 슈퍼 클래스 자식 클래스 (Child) = 서브 클래스 자식 클래스 (Child) = 서브 클래스 < 클래스 상속 >
  17. This work is licensed under the Apache 2.0 License open

    class Animal{ /* 중략 */ } class Bird(birdName: String, birdAge: Int) : Animal(name = birdName, age = birdAge) { var flySpeed: Int = 0 set(value) { if (value <= 50) { field = value } } fun fly() { println(“${flySpeed}속도로 날고있어요!”) } } fun main() { val puppy = Animal(“아리”, 5) puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” val yeppy = Bird(“예피”, 3) yeppy.introduce() // 출력 결과는 “이름은 예피이고, 3살 입니다.” yeppy.flySpeed = 30 yeppy.fly() // 출력 결과는 “30속도로 날고있어요!” } -> 상속된 클래스
  18. This work is licensed under the Apache 2.0 License open

    class Animal{ /* 중략 */ } class Bird(birdName: String, birdAge: Int) : Animal(name = birdName, age = birdAge) { var flySpeed: Int = 0 set(value) { if (value <= 50) { field = value } } fun fly() { println(“${flySpeed}속도로 날고있어요!”) } } fun main() { val puppy = Animal(“아리”, 5) puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” val yeppy = Bird(“예피”, 3) yeppy.introduce() // 출력 결과는 “이름은 예피이고, 3살 입니다.” yeppy.flySpeed = 30 yeppy.fly() // 출력 결과는 “30속도로 날고있어요!” }
  19. This work is licensed under the Apache 2.0 License open

    class Animal{ /* 중략 */ } class Bird(birdName: String, birdAge: Int) : Animal(name = birdName, age = birdAge) { var flySpeed: Int = 0 set(value) { if (value <= 50) { field = value } } fun fly() { println(“${flySpeed}속도로 날고있어요!”) } } fun main() { val puppy = Animal(“아리”, 5) puppy.introduce() // 출력 결과는 “이름은 아리이고, 5살 입니다.” val yeppy = Bird(“예피”, 3) yeppy.introduce() // 출력 결과는 “이름은 예피이고, 3살 입니다.” yeppy.flySpeed = 30 yeppy.fly() // 출력 결과는 “30속도로 날고있어요!” } -> getter/setter 함수
  20. This work is licensed under the Apache 2.0 License IS-A?

    HAS-A? IS-A 클래스를 상속(Inherits) 받을 때의 관계 HAS-A 객체는 실제로 클래스 자체인 인스턴스가 아니더라도 다른 클래스의 인스턴스를 소유할 때의 관계
  21. This work is licensed under the Apache 2.0 License class

    Bird(birdName: String, birdAge: Int) : Animal(name = birdName, age = birdAge) { /* 중략 */ } class Cage(val bird: Bird){ /* 중략 */ } IS-A 관계의 예시 HAS-A 관계의 예시
  22. This work is licensed under the Apache 2.0 License #1

    람다 표현식 - 람다 표현식은 함수를 작성하는 약식 문법을 제공 - 함수 유형을 다른 함수에 전달할 수 있다. val greeting = { name: String -> println(“안녕! 나는 ${name}야!”) } greeting(“아리") // 출력 결과 “안녕! 나는 아리야!”
  23. This work is licensed under the Apache 2.0 License #1

    람다 표현식 val greeting : (String) -> Unit { println(“안녕! 나는 ${it}야!”) } greeting(“아리") // 출력 결과 “안녕! 나는 아리야!” 입력 자료형 출력 자료형
  24. This work is licensed under the Apache 2.0 License #2

    고차함수 - 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수 fun sum (a: Int, b: Int): Int = a + b fun calculate(a: Int, b: Int): Int = sum(a, b) println(“10 + 20 = ${calculate(10, 20)}”) // 출력 결과는 “10 + 20 = 30”
  25. This work is licensed under the Apache 2.0 License Jetpack

    Compose 용어 정리! @Composable (컴포저블) 구성 가능한 함수를 호출하여 데이터를 UI요소로 반환하는 것입니다. 리컴포지션 (재구성) Compose가 데이터 변경사항에 따라 변경될 수 있는 컴포저블을 다시 실행한 다음 변경사항을 반영하도록 컴포지션을 업데이트하는 것입니다. State / MutableState 앱의 상태를 Compose에서 관찰 가능하거나 추적 가능한 상태로 설정할 수 있습니다. State -> 수정은 불가하고 읽기만 가능한 ‘ReadOnly’! MutableState -> 수정과 읽기 모두 가능!
  26. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue = mutableStateOf(“0”) TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, }
  27. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue = mutableStateOf(“0”) TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, }
  28. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue = mutableStateOf(“0”) TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, }
  29. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue = mutableStateOf(“0”) TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, }
  30. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue = mutableStateOf(“0”) TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, } 1.
  31. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue = mutableStateOf(“0”) TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, } 2. 2. 리컴포지션 (재구성)
  32. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue = mutableStateOf(“0”) TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, } 3.
  33. This work is licensed under the Apache 2.0 License remember

    계산된 값은 초기 컴포지션 중에 컴포지션에 저장되고 저장된 값은 리컴포지션 중에 반환됩니다... 쉽게 말하자면! 컴포저블이 재구성 되더라도 값을 저장할 수 있도록 도와주는 키워드!!!
  34. This work is licensed under the Apache 2.0 License 컴포지션

    (Composition) @Composable fun EditNumberField() { var inputValue by remember { mutableStateOf(“”)} TextField( value = inputValue.value, onValueChange = { inputValue.value = it }, }
  35. This work is licensed under the Apache 2.0 License 2

    3 5 4 1 #1.null null은 항상 조심! NullPointerException! Nullable type 안전호출과 어설션 #2.class 클래스의 정의 객체와 인스턴스 예시로 보는 클래스와 상속 관계들 #3.람다와 고차함수 람다 표현식 고차함수 #4.Compose Jetpack Compose 용어 팁 금액 표시기 속 요소 예시로 보는 컴포지션 리컴포지션(재설정) remember의 정의 remember 활용 예시 #5.remember