Android Jetpack Compose

반응형

    [Compose SideEffect] SideEffect를 이용해 부수효과 처리하기

    SideEffect란 SideEffect는 Composable의 Composition이 성공적으로 되었을 때 발행하는 Effect이다. SideEffect는 Compose에서 관리하지 않는 객체와 Compose 내부의 데이터를 공유하기 위해 사용한다. SideEffect의 사용 TextField를 보이지 않게(isVisible=false) 했다가. 버튼이 눌렸을 때 보이게(isVisible = true) 만드는 코드가 있다고 하자. 이때 isVisible과 관련된 값은 모두 Compose에서 관리하는 값이므로 다음과 같이 작성이 가능하다. @Composable fun HomeScreen() { var isVisible by remember { mutableStateOf(false) } Column(mod..

    [Compose Side Effect] Disposable Effect 란 무엇인가?

    Disposable Effect란? DisposableEffect란 Composable이 Dispose된 후에 정리해야 할 Side Effect가 있는 경우에 사용되는 Effect이다. 자세히 이야기 하면 Composable의 Lifecycle에 맞춰 정리되어야 하는 리스너나 작업이 있는 경우에 리스너나 작업을 제거하기 위해 사용되는 Effect가 바로 DisposableEffect이다. 안드로이드에서는 Lifecycle에 따라 Side Effect(부수 효과)를 발생시킨 다음 정리되어야 하는 부분이 많다. 이런 부분에서 제대로 Side Effect에 대한 정리를 하지 않으면 제어권을 잃어 메모리에 leak이 생기거나 예측하지 못한 결과나 나올 수 있다. Disposable Effect 사용 방법 Dis..

    [Compose State] remember과 rememberUpdatedState를 사용한 상태 관리

    remember의 사용과 한계점 Composable에서 remember은 Recomposition이 일어날 때 상태를 관리하기 위해 사용된다.remember의 상태는 remember의 value를 직접 수정해주는 것으로만 가능하다. *by 키워드는 value에 직접 접근하도록 도와주는 delegation이다. 헷갈리지 말자. @Composable private fun TextFieldExample() { val text = remember { mutableStateOf("Kotlin World") } Column(modifier = Modifier.padding(16.dp)) { OutlinedTextField( value = text.value, onValueChange = { text.value = ..

    [Compose Side Effect] LaunchedEffect에서 한 번만 실행되어야 하는 동작 처리하기

    LaunchedEffect에서 한 번만 실행되어야 하는 동작 처리하기 LaunchedEffect는 key값이 바뀌면 블록내의 동작을 취소한 후 다시 실행한다. 따라서 한 번만 수행해야하는 작업들은 LaunchedEffect에 true나 Unit을 넘겨주는 방향으로 실행해야 한다. @Composable fun KotlinWorldScreen(oneTimeEffect: () -> String) { LaunchedEffect(true) { oneTimeEffect() } } 이렇게 하면 oneTimeEffect()는 한 번만 수행된다. LaunchedEffect에서 한 번만 실행되어야 하는데 동작이 길 때 처리하기 LaunchedEffect에서 긴 동작의 람다식을 처리해야 할 때는 rememberUpdated..

    [Compose Focus] 1. FocusRequester을 활용해 Focus 바꾸기 - Android Compose Focus Change

    FocusRequester란? FocusRequester란 컴포즈 상에서 컴포저블(View)의 Focus를 바꿔주는 객체이다. 예를 들어 Button이 눌렸을 때 포커스가 TextField로 가야하는 경우 사용된다. FocusRequester 사용법 1. FocusRequester을 Composable 내의 remember 블록에서 선언한다. 2. Modifier.focusRequester() 함수를 이용해 위에서 만든 focusRequester을 포커스를 주기 원하는 곳에 붙인다. 3. 특정 이벤트가 발생했을 때 포커스 주기를 원하면 requestFocus()을 붙인다. @Composable fun KotlinWorldFocusRequester() { .. val focusRequester = reme..

    [Compose Side Effect] rememberCoroutineScope을 이용해 Composable의 생명주기에 맞춰 코루틴 수행하기

    Composable에서 올바른 CoroutineScope을 선택하는 것이 중요한 이유 Composable 내부에서 코루틴을 수행할 경우 Composable에 대한 Recomposition이 일어날 때 정리되어야 하는 Coroutine이 정리가 안된 상태로 계속해서 Coroutine이 쌓일 수 있다. Recomposition은 자주 일어나는 동작이므로 Recomposition마다 Coroutine을 생성하는 것은 위험하며 심할 경우 앱 크래시를 발생시킬 수도 있다. 따라서 Composable에서 Coroutine을 생성한다면 Recomposition이 일어날 때 취소되어야 한다(꼭 그렇지 않은 경우도 있지만 그래야 하는 경우가 대부분이다). Compose는 이를 위해 Composable의 Lifecycle..

    [Compose Side Effect] 1. LaunchedEffect 를 이용한 suspend fun 실행

    LaunchedEffect 살펴보기 LaunchedEffect는 Composable에서 컴포지션이 일어날 때 suspend fun을 실행해주는 Composable이다. @Composable fun LaunchedEffect( key1: Any?, block: suspend CoroutineScope.() -> Unit ) { .. } 리컴포지션은 Composable의 State가 바뀔 때마다 일어나므로, 만약 매번 리컴포지션이 일어날 때마다 이전 LaunchedEffect가 취소되고 다시 수행된다면 매우 비효율적일 것이다. 이를 해결하기 위해 LaunchedEffect는 key라 불리는 기준값을 두어 key가 바뀔 때만 LaunchedEffect의 suspend fun을 취소하고 재실행한다. 예를 들어 ..

    [Android Compose State] State Hoisting(상태 호이스팅) 패턴이란 무엇인가?

    Compose의 State 선언형 UI 프레임워크인 Compose는 Stateless함이 가장 큰 장점이다. UI에 대한 UI상태의 상호 의존성을 끊을 수 있다면 UI의 재사용성이 생기고, UI에 대한 테스트 또한 가능해지기 때문이다. Compose Stateless의 장점 1. UI 재사용성 2. UI 테스트 가능성 하지만 가끔 상태가 UI에 저장되어야만 하는 경우가 있다. 대표적으로 TextField가 있다. TextField는 어떤 텍스트가 입력되었는지를 저장해야 하기 때문에 상태를 가져야 한다. 아래에서 제목을 가지도록 Custom한 TextField인 TextFieldWithTitle을 보자. @Composable fun TextFieldWithTitle(title: String) { var t..

    [Compose Side Effect] Side Effect(부수효과) 란 무엇인가?

    Side Effect란 무엇인가? Side Effect(부수 효과)란 Composable 범위 밖에서 발생하는 앱 상태에 대한 변경이다. Side Effect를 이해하기 위해서는 아래 두가지를 이해해야 한다. Composable은 각각의 Lifecycle을 가지고 있다. Composable은 단방향으로만 State를 전달한다. 우리는 Composable을 사용할 때 여러 Composable들을 겹쳐서 사용한다. 그러면 시스템은 각 Composable에 대한 Lifecycle을 만들고, Composable 별로 재구성이 필요할 때만 재구성시킨다. 또한 Composable은 기본적으로 바깥쪽 Composable이 안쪽 Composable로 State를 내려준다. 이로 인해 단방향으로만 의존성이 생긴다. 하지..

    [Compose Resource Legacy] 1. colorResource, getColor 사용해 color.xml파일에서 Color객체 만들기 : Compose의 xml파일에서 color을 로딩하는 방법

    color.xml과 Color객체 color.xml은 Jetpack Compose가 출시되기 이전 color을 정의하는 방법이었다. 하지만, Compose에서 Color객체와 Color객체를 이용한 Theming을 지원하게 되면서 코드 상에 Color 객체를 정의하는 방식이 표준이 되어, 기존 color.xml을 이용한 색상 리소스 로딩 방법을 더이상 사용하지 않게 되었다. 하지만 기존의 프로젝트들에서 모든 리소스를 한 번에 이동하기는 번거롭다. 따라서 Compose에서는 colorResource메서드와 color.xml을 이용한 Color객체 로딩 방법 또한 제공한다. 새로운 앱에서는 color.xml을 사용하지 말고 Color 객체를 사용하도록 하자. 기존 color.xml의 color를 로딩하기 위..

반응형