이번에는 view를개선하겠습니다! 이전 viewModel과 연계되는 작업을 진행 합니다. 그때 처럼 하나씩 의존성을 제거하는 방식으로 구현해야 합니다. 이렇게 특히 presentation 단계에서는 viewModel에 대한 의존성이 커질수 있는 코드가 존재하는데요 예를 들면 다음과 같습니다

개선 전 Composable

AddEditNoteScreen.kt

@Composable
fun AddEditNoteScreen(
	..
    viewModel: AddEditNoteViewModel = hiltViewModel()
) {
    val titleState = viewModel.noteTitle.value
    val contentState = viewModel.noteContent.value
    ...
}

MainActivity.kt

...
AddEditNoteScreen()
...

hiltViewModel()을 사용하는 Screen인 경우 해당 viewModel에 UI가 의존적인 상황입니다. 그래서 실제 preview() 를 생성하게 될때도 이부분으로 인해서 제약이 있습니다. viewModel까지 @preview 에서 알고 있어야 하는 안타까운 현상이 발생 하게 되기 때문입니다. 어떤 viewModel이 주입되던 간에 이부분은 값이 출력될 수 있도록 구현해야 합니다.

hiltViewModel() 을 호출하는 곳에서 정해주기

ViewModel과의 연관관계를 없에기위해서는 호출하는 곳에서 viewModel을 직접 정해주는 것으로 변경하도록 합니다. 저의 경우에는 MainActivity에서 호출하고 있기 때문에, Activity에서 viewModel을 선언하여 해당 내용을 참조할수 있도록 변경하였습니다.

AddEditNoteScreen.kt

@Composable
fun AddEditNoteScreen(
    ...
    , noteTitle: NoteTextFieldState
    , noteContent: NoteTextFieldState
    ..
) {
	TextField(
      text = noteTitle.text,
      hint = noteTitle.hint,
      ...
	)
}

기존 코드에서 viewModel에서 불러주었던것을 파라미터에있는 변수를 직접 가져와서 넣어줄 수 있습니다.

MainActivity.kt

val viewModel = hiltViewModel<AddEditNoteViewModel>()
val noteTitle = viewModel.noteTitle.value
val noteContent = viewModel.noteContent.value

...

AddEditNoteScreen(
	...
    noteTitle = noteTitle,
    noteContent = noteContent
    ...
)

이렇게 수정하면 ViewModel (AddEditNoteViewModel ) 에 의존적이지 않게 작성하여 preview를 작성할때도 다음과 같이 작성할 수 있습니다.

@Preview
@Composable
fun AddEditNoteScreenTest() {
    NoteAppTheme {
        AddEditNoteScreen(
            ...
            noteTitle = NoteTextFieldState(text = "테스트", hint = "테스트", isHintVisible = true),
            noteContent = NoteTextFieldState(text = "테스트", hint = "테스트", isHintVisible = true),
            ..
        )
    }
}

결론

Composable을 계속 수정중에 있습니다. 생각보다 사용하면서 알아는 것들이 많게되어서 계속 내용이 수정될 것 같습니다. 해당 github을 참조 하시면 상세한 수정한 정보를 보실수 있습니다.