[Compose] stateful vs stateless

Composable function을 만들때, 2가지 방식으로 만들 수 있다. 모든 상태값은 관리하는 것과 외부에서 데이터를 주입받아 사용하는 방식이 있다. 

 

stateful vs stateless 

아래와 같이 UI 상에서 관리해야 하는 상태 정보들을 모두 관리할 수 있다. 이렇게 만들었을 때, 해당 UI에서만 상태값을 관리하면 된다는 점에서 편하다. 간단한 UI 혹은 최상단의 컴포저블 함수일 때, 아래와 같이 구성할 것이다. 

@Composable
fun switch() {
	val activated by remember { mutableState(false) }
    
    Switch(
	    activated = activated,
        onChange = { activated = it } 
    )
}

 

하지만, 화면을 구성하다보면 복잡해진다. 데이터에 따라서 UI가 변경되야 하는 상황이 많다. 그래서 많은 경우에 Stateless하게 만들게 된다. 아래와 같이, 외부에서 값을 관리하고, 컨트롤하는 일이 많이 발생한다. 혹은 각 뷰별로 State를 만들어서 관리한다. 예를 들어, LazyColumn 같은 경우, rememberLazyListState() 라는 것을 통해서 상위 컴포저블에서 뷰를 컨트롤한다. 특히 재사용을 염두한 뷰라면 아래와 같이 관리하는 것이 재사용에 좋다. 

@Composable
fun (isActivated: Boolean, onChange: (boolean) -> Unit) {
	Switch(
    	isActivated = isActivated,
        onChange = onChange,
    )
}

 

 

Value vs Lambda

parent function에서 child function으로 데이터를 전달할 때는 value로 넘기며, 반대의 경우에는 lambda를 통해서 데이터를 아래에서 위로 올린다. 이 방식을 모두 사용하게 되면 Stateless한 function을 만들 수 있다. 이런 함수에서 데이터를 변경시키는 패턴을 호이스팅이라고 한다.