애플리케이션 로직이 올바른지 확인하기 위해 ViewModel을 테스트하는 것은 좋은 생각이다. 이 섹션에서는 상태에 대해 State<T>를 사용하여 ViewModel을 테스트 하는 방법을 보여주는 테스트 코드를 작성할 것이다. TodoViewModelTest에 테스트 추가하기 이 테스트는 이벤트에 의해 직접 수정되는 State<T>를 테스트하는 방법을 보여준다. 이전 섹션에서 새 ViewModel을 만든 다음 todoItems에 두 개의 항목을 추가한다. 우리가 더보기…
우리 디자이너의 네오 모던 인터랙티브 모의를 리뷰중, 현재 편집하는 아이템을 나타내는 몇가지 상태 추가가 필요해졌다. 이제 이 에디터의 상태를 추가할 위치를 결정해야 한다. 아이템 나타내거나 편집을 처리하는 또 다른 stateful 컴포저블인 “TodoRowOrInlineEditor”를 만들 수 있지만, 한 번에 하나의 에디터만 표시하려고 한다. 디자인을 자세히 보면 편집 모드에서도 상단 섹션이 변경되고 있다. 더보기…
디자이너가 오늘 새로운 디자인 트렌드 상에 있다. 단정하지 못한 UI와 포스트 머테리얼은 사라졌다. 이번주 디자인은 디자인 트레드인 “네오 모던 인터렉티브”를 따르는 것이다. 디자이너에게 그게 뭐냐고 물었고 대답은 이모지가 포함하여 약간 혼란스러웠다. 하지만 어쨌든, 여기에 목업 디자인이 있다. Tip: 네오 모던 인터렉티브는 아마도 디자인 트렌드일 것이다. 디자이너는 새로운 디자인은 저장 및 완료 더보기…
지난 섹션에서 컴포저블에 state를 추가하는 방법과 컴포저블이 사용하는 state를 stateless로 만들기 위해 state hoisting을 하는 방법에 대해서 배웠다. 이제 state기반의 동적인 UI를 만들는 방법을 알아보자. 디자이너의 목업 디자인으로 다시 보면, 텍스트가 공백이 아닐 때마다 icon행을 보여줘야 한다. 상태로부터 iconVisible 얻기 TodoScreen.kt 을 열고 새로운 state 변수를 생성하여 현재 선택된 icon을 더보기…
지난 섹션에서 어떻게 컴포저블 함수들이 메모리를 갖는지 배웠다. 이제 그 메모리를 사용하여 컴포저블에 상태(state)를 추가 해보도록 하자. 디자이너가 단정치 못한 디자인에서 포스트 머테리얼로 전환했다. todo 입력에 대한 새로운 디자인은 접을수 있는 헤더로써 같은 공간을 차지한다. 그리고 확장(expanded) 및 축소(collapsed) 두개의 상태를 갖는다. 텍스트가 비어있지 않다면 확장된 상태를 볼 수 있다. 더보기…
단방향 데이터 흐름을 만들기 위해 컴포즈를 ViewModel과 함께 어떻게 사용해야 하는지 알아보았다. 지금부터 컴포즈가 내부적으로 state와 어떻게 상호작용하는지 알아보자. 지난 섹션에서는 컴포저블을 다시 호출하여 컴포즈가 화면을 업데이트 하는것을 보았다. 이러한 처리를 recomposition(재구성)이라 한다. TodoScreen을 다시 호출하여 동적인 목록을 보여줄 수 있었다. 이 섹션과 다음 섹션에서는 컴포저블을 stateful하게 만들는 방법에 대해서 더보기…
지난 섹션에서 ViewModel과 LiveData를 사용하는 단방향 데이터 흐름에 대해서 살펴보았다. 이제는 컴포즈로 옮겨가서 어떻게 단방향 데이터 흐름을 컴포즈에서 ViewModel과 함께 사용하는지 알아보도록 하자. 이전 섹션을 읽지 않은 사람을 위해, 다시 한번 아래의 3가지 용어에 대해서 짚고 넘어가자. State – 시간에 따라 변경 될 수 있는 어떤 값 Event – 프로그램 더보기…
이 섹션은 안드로이드 View 시스템을 사용한 단방향 데이터 흐름 개념을 소개한다. 이미 단방향 데이터 흐름 및 구조화 된 코드에서 어떤식으로 사용되는지 알고 있다면, 다음 섹션으로 넘어가도 좋다. UI 업데이트 순환 TODO앱을 만들기 전에, 단방향 데이터 흐름에 대해서 알아보자. 무엇이 state를 갱신하게 만들까? 도입부에서는 state는 시간에 따라 변경되는 어떠한 값이라고 했다. 더보기…
샘플 앱을 다운로드 하려면 다음중 하나를 수행하자. 샘플 앱 다운로드를 수행하거나 또는 커맨드 라인을 사용하여 Github 저장소를 클론하자 git clone https://github.com/googlecodelabs/android-compose-codelabs.git cd android-compose-codelabs/StateCodelab compose-codelabs 저장소는 코드랩을 위한 스타터 코드를 포함한다. 이 코드랩에서는 StateCodelab 프로젝트를 사용한다. – StateCodelab : 이 코드랩을 위한 시작과 끝을 포함하는 코드가 담긴 프로젝트 이 디렉토리는 start 더보기…
이 코드랩에서는 state 및 Jetpack Compose에 의해 state가 어떻게 사용되고 조작되는지 알아본다. 그 전에, state라는 것이 정확히 무엇인지 정의하는게 좋을 것 같다. state의 핵심을 보면, 애플리케이션의 state는 시간에 따라 변경 가능한 어떤 값이다. 이건 매우 개괄적인 정의고, Room 데이터베이스 부터 클래스내의 변수까자 망라한다. 애플리케이션의 State(상태)는 시간에 따라 변경 가능한 어떤 더보기…